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
prop时，它呈现的很好（除了ChildComponent没有关键的prop之外），但是在JSX
Typescript中使用它拒绝编译它。我认为这可能与基于本文的连接包装有关，但是该文章中的问题出现在index.tsx文件中，并且是提供程序的问题，我在其他地方也遇到了问题。

Answer 1

因此，在阅读了一些相关的答案（特别是这个和并查看了@basarat对问题的答案之后，我设法找到了对我有用的东西。（在我相对较新的React眼中）Connect似乎没有提供容器组件的显式接口，因此它被尝试传递的属性所迷惑。

因此容器组件保持不变，但子组件有所变化：

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忍者想对这个答案有所了解，我会很乐意对其进行修改。