reactjs – Typescript React/Redux：属性“XXX”在类型’Intrin

发布时间：2020-12-15 06:24:03 所属栏目：百科来源：网络整理

导读：我正在开发一个使用Typescript，React和Redux(都在Electron中运行)的项目，当我在另一个中包含一个基于类的组件并尝试在它们之间传递参数时，我遇到了一个问题。松散地说，我有容器组件的以下结构： class ContainerComponent extends React.Componentany,an

我正在开发一个使用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);

显然我只包括基础知识，这两个类还有更多，但是当我尝试运行看起来像有效代码的东西时，我仍然会收到错误。我得到的确切错误：

06002

当我第一次遇到错误时，我认为这是因为我没有通过定义我的道具的界面，但是我创建了它(如上所示)并且它仍然不起作用。我想知道，有什么我想念的吗？

当我从ContainerComponent中的代码中排除ChildComponent prop时，它渲染得很好(除了我的ChildComponent没有关键道具)但是在JSX Typescript中拒绝编译它。我认为它可能与基于this article的连接包装有关，但该文章中的问题发生在index.tsx文件中并且是提供者的问题，我在其他地方遇到了问题。

因此，在阅读了一些相关的答案(特别是 this one和 this one，并查看@ 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忍者想要放弃一些关于这个答案的知识，我很乐意修改它。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!