Question

我在尝试严格键入react组件的props并只将1个属性传递给该组件时遇到了问题。

以此为例：

我有这个类App，它有一个SideMenu类的子组件。 SideMenu有强类型道具，如：

class SideMenu extends Component<ISideMenu> {
    render() {
        return (
            <div>
                Test
            </div>
        );
    }
}

const mapStateToProps = (state: IFileExplorerState) => {
    return {
        fileExplorerInfo: state.fileExplorer
    };
};

export default connect<{}, {}, ISideMenu, IFileExplorerState>(mapStateToProps, {})(SideMenu);

这是我用来强烈输入道具的ISideMenu界面：

export interface ISideMenu {
    fileExplorerInfo: IFileExplorerState;
}

所以现在在我的App类中我试图渲染SideMenu组件，但typescript显示错误，说我没有将prop fileExplorerInfo传递给该组件。我宁愿不必这样做，因为redux填充了我在商店的状态下使用的道具。有没有人建议如何更好地处理这个问题？

class App extends Component {
    render() {
        return (
            <div>
                <SideMenu />
            </div>
        );
    }
}

Answer 1

您错过了连接功能

中类型的顺序

connect<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = {}>

TStateProps来自mapStateToProps中的州
TOwnProps来自外面

您应该像这样使用连接：

export default connect<ISideMenu, {}, {}, IFileExplorerState>(mapStateToProps, {})(SideMenu);

或者你可以留空＆＃34;通用部分＆＃34;

export default connect(mapStateToProps, {})(SideMenu);

渲染使用打字稿反应组件而不传入强类型道具

1 个答案: