首页 文章

打字稿Redux - 从调度道具中使用参数道具进行类型检查

提问于
浏览 次
0

已经阅读了几篇关于此的文章，但它们似乎对我不起作用 . 我声明了两个接口 . 一个用于表示父项传递的组件道具：

interface MyProps {
    name: string;
}

然后是另一个表示redux connect（）函数创建的props的接口：

interface DispatchProps {
    addData: (someData: any) => void;
}

因此，要获得合适的类型检查我的理解是我需要使用泛型创建我的react组件：

class MyComponent extends React.Component<MyProps, {}> {
    render() {
        return (
            <span onClick={this.props.addData}>{this.props.name}</span>
        };
    }

问题是打字稿现在很烦，因为this.props.addData不存在 . 所以我做了互联网告诉我的一个好小男孩并添加一个交集类型：

class MyComponent extends React.Component<MyProps & DispatchProps, {}> {}

但问题只是简单地转移了，因为在父组件中，打字稿现在很难过，因为在我的渲染中我有：

render() {
    return (
        <MyComponent name="a name" />
    );
}

因为“类型{}”上缺少“属性addData” .

那我在这里错过了什么？如何以一种允许我在组件中进行类型检查的方式将redux与反应的作用结合起来？

提前致谢 .

reactjs typescript redux react-redux

1 回答

  • 0

    事实证明问题不在于我的接口/泛型，问题在于我的父语句中的import语句 . 我发布了答案，希望它可能在将来帮助其他人 .

    我有：

    import {MyComponent} from './MyComponent';

    但这是导入COMPONENT CLASS而不是此行中生成的CONNECTED COMPONENT：

    export default connect(mapStateToProps, mapDispatchToProps);

    导入默认值并将正确的泛型添加到connect函数解决了我的问题 .

    回复于

相关问题