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


91

我正在使用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文件中,并且是提供程序的问题,我在其他地方也遇到了问题。

Answers:


54

因此,在阅读了一些相关的答案(特别是这个这个答案)并查看了@basarat对问题的答案之后,我设法找到了对我有用的东西。容器组件的显式接口,因此它被尝试传递的属性所迷惑。

因此容器组件保持不变,但子组件有所变化:

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


7
React.Props已被弃用!
Sunil Sharma


-1

相反的export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);,喜欢的connect装饰https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/app/fileTree.tsx#L136-L146

@connect((state: StoreState): Props => {
    return {
        filePaths: state.filePaths,
        filePathsCompleted: state.filePathsCompleted,
        rootDir: state.rootDir,
        activeProjectFilePathTruthTable: state.activeProjectFilePathTruthTable,
        fileTreeShown: state.fileTreeShown,
    };
})

在此处定义连接的地方https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings/react-redux/react-redux.d.ts#L6-L36

为什么?

似乎您正在使用的定义可能已过时或无效(可能编写不当)。


2
看起来在子组件上进行连接肯定是问题所在,但是我找到了一种解决问题的方法,而无需更改正在使用的类型。通过使用此链接中的解决方案,我设法将连接更改为: connect<{}, {}, PassedProps> PassedProps是组件从其父容器获取的道具。
主角
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.