reactjs - (React Redux TS) 类型“Readonly<{}> & Readonly<{ children?: ReactNode; }>'

Question

我正在尝试将属性传递给我的组件，但编译器返回错误。我在 stackoverflow 上阅读了几篇类似的文章和问题，但其中大多数都提到了缺少 props 定义。我用自定义道具的定义定义了界面，这就是我寻求帮助的原因。我想打字有问题。

这是我的一些代码：

索引.tsx

import React from 'react';
import { render } from 'react-dom';
import './index.module.css';
import App from './components/App';
import { Provider } from 'react-redux';
import configureStore from './store';

const store = configureStore();

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'),
);

应用程序.tsx

import React, { Component, ReactNode } from 'react';
import styles from './App.module.css';
import Login from './Login';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { theme } from '../theme';
import Home from './Home';
import { connect } from 'react-redux';
import { AppState } from '../store';
import { SystemState } from '../store/system/types';

export interface AppProps {
    system: SystemState;
}

class App extends Component<AppProps> {
    constructor(props: AppProps) {
        super(props);
    }

    render(): ReactNode {
        return (
            <MuiThemeProvider theme={theme}>
                <div className={styles.App}>
                    {!this.props.system.isAuthenticated && <Login />} //error
                    {this.props.system.isAuthenticated && <Home />} //error
                </div>
            </MuiThemeProvider>
        );
    }
}

const mapStateToProps = (state: AppState): AppProps => ({
    system: state.system,
});

export default connect<AppProps, {}, {}, AppState>(mapStateToProps)(App);

索引.ts

import { createStore, combineReducers, applyMiddleware, Store } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { systemReducer } from './system/reducers';
import { StateType } from 'typesafe-actions';

const rootReducer = combineReducers({
    system: systemReducer,
});

export type AppState = StateType<ReturnType<typeof rootReducer>>;

export default function configureStore(): Store {
    const middlewares = [thunkMiddleware];
    const middleWareEnhancer = applyMiddleware(...middlewares);

    const store = createStore(rootReducer, composeWithDevTools(middleWareEnhancer));

    return store;
}

我如何声明我的道具以使其工作？

标签： reactjstypescriptreact-redux