Reactjs （React-Redux TS）属性'；系统&x27；不存在于类型'；只读<；{}>&；只读<；{children？：ReactNode；}>'；

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

以下是我的一些代码：

index.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'),
);

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);

从“React”导入React；
从'react dom'导入{render}；
导入“./index.module.css”；
从“./components/App”导入应用程序；
从'react redux'导入{Provider}；
从“/store”导入配置存储；
const store=configureStore（）；
渲染(
,
document.getElementById（'root'），
);

App.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'),
);

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);

import React，{Component，ReactNode}来自“React”；
从“./App.module.css”导入样式；
从“./Login”导入登录名；
从'@material ui/core/styles'导入{MuiThemeProvider}；
从“../theme”导入{theme}；
从“./主页”导入主页；
从'react redux'导入{connect}；
从“../store”导入{AppState}；
从“../store/system/types”导入{SystemState}；
导出接口AppProps{
系统：SystemState；
}
类应用程序扩展组件{
构造函数（props:AppProps）{
超级（道具）；
}
render（）：反应节点{
返回(
{！this.props.system.isAuthenticated&&}//错误
{this.props.system.isAuthenticated&&}//错误
);
}
}
常量mapStateToProps=（状态：AppState）：AppProps=>({
系统：state.system，
});
导出默认连接（MapStateTops）（应用程序）；

index.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;
}

从'redux'导入{createStore，combinereducer，applyMiddleware，Store}；
从“redux thunk”导入thunk中间件；
从'redux devtools extension'导入{composeWithDevTools}；
从“./system/reducers”导入{systemReducer}；
从“类型安全操作”导入{StateType}；
const rootReducer=combinereducer({
系统：systemReducer，
});
导出类型AppState=StateType；
导出默认函数configureStore（）：Store{
const middleware=[thunkMiddleware]；
const middleWareEnhancer=applyMiddleware（…中间件）；
const store=createStore（rootReducer，composeWithDevTools（middleWareEnhancer））；
退货店；
}

---

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

错误来自哪一行？错误发生在App.tsx文件中，每行都标有注释。

登录

和

主页

组件是否也需要系统道具？是，我将来会需要它们。请确保您也在这两个设备上执行

连接

，或者手动传递道具。