Typescript React / Redux：类型'IntrinsicAttributes和IntrinsicClassAttributes上不存在属性“XXX”

Question

我正在使用 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...'.

当我第一次遇到错误时，我认为这是因为我没有传入定义我的道具的接口，但是我创建了它（如您在上面看到的），但它仍然不起作用。我想知道，我有什么遗漏吗？

当我从 ContainerComponent 的代码中排除 ChildComponent 道具时，它呈现得很好（除了我的 ChildComponent 没有关键道具）但在 JSX Typescript 中使用它拒绝编译它。我认为这可能与基于 本文 的连接包装有关，但那篇文章中的问题发生在 index.tsx 文件中，并且是提供程序的问题，我在其他地方遇到了问题。

原文由 Protagonist 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

因此，在阅读了一些相关答案（特别是 这个 和 这个 并查看@basarat 对问题的回答后，我设法找到了适合我的东西。它看起来（在我相对较新的 React 眼中）就像 Connect 没有提供容器组件的显式接口，因此它被它试图传递的 prop 弄糊涂了。

所以容器组件保持不变，但子组件发生了一些变化：

 interface IChildComponentProps extends React.Props<any> {
  ... (other props needed by component)
}

interface PassedProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps & PassedProps, any> {
  ...
}

....
export default connect<{}, {}, PassedProps>(mapStateToProps, mapDispatchToProps)    (ChildComponent);

以上设法为我工作。显式传递组件期望从容器中获得的道具似乎可以正常工作，并且两个组件都正确呈现。

注意： 我知道这是一个非常简单的答案，我不确定为什么会这样，所以如果一个更有经验的 React 忍者想要放弃一些关于这个答案的知识，我很乐意修改它。

原文由 Protagonist 发布，翻译遵循 CC BY-SA 3.0 许可协议