reactjs - typescript + React/Redux : Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

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...'.

当我第一次遇到这个错误时，我以为是因为我没有传递一个定义我的 Prop 的接口(interface)，但我创建了它(正如你在上面看到的)但它仍然不起作用。我想知道，有什么我想念的吗？

当我从 ContainerComponent 的代码中排除 ChildComponent Prop 时，它呈现得很好(除了我的 ChildComponent 没有关键 Prop )但是在 JSX Typescript 中拒绝编译它。我认为这可能与基于 this article 的连接 package 有关，但那篇文章中的问题出现在 index.tsx 文件中，并且是提供商的问题，我在其他地方遇到了问题。

Answer 1

所以在阅读了一些相关的答案(特别是 this one 和 this one 并查看了@basarat 对问题的回答之后，我设法找到了适合我的东西。它看起来(在我相对较新的 React 眼中)像Connect 没有为容器组件提供显式接口(interface)，因此它被它试图传递的 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);

以上内容对我有用。显式传递组件期望从容器获得的 props 似乎有效，并且两个组件都正确呈现。

注意:我知道这是一个非常简单的答案，我不确定为什么会这样，所以如果更有经验的 React 忍者想在这个答案上放弃一些知识，我会很高兴对其进行修改。