我正在开发一个使用 Typescript、React 和 Redux(全部在 Electron 中运行)的项目,当我将一个基于类的组件包含在另一个组件中并尝试在它们之间传递参数时,我遇到了问题。宽松地说,我的容器组件结构如下:
class ContainerComponent extends React.Component<any,any> {
..
render() {
const { propToPass } = this.props;
...
<ChildComponent propToPass={propToPass} />
...
}
}
....
export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);
以及子组件:
interface IChildComponentProps extends React.Props<any> {
propToPass: any
}
class ChildComponent extends React.Component<IChildComponentProps, any> {
...
}
....
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);
显然,我只包括基础知识,这两个类还有更多内容,但当我尝试运行在我看来有效的代码时,我仍然收到错误。我收到的确切错误:
TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.
当我第一次遇到这个错误时,我认为这是因为我没有传入定义我的 props 的接口,但我创建了它(如您在上面看到的),但它仍然不起作用。我想知道,我缺少什么吗?
当我从 ContainerComponent 的代码中排除 ChildComponent 属性时,它渲染得很好(除了我的 ChildComponent 没有关键属性),但在 JSX Typescript 中使用它时拒绝编译它。我认为这可能与基于的连接包装有关本文 http://www.mattgreer.org/articles/typescript-react-and-redux/,但该文章中的问题发生在 index.tsx 文件中,并且是提供商的问题,而我在其他地方遇到了问题。