Typescript + React/Redux: 属性 "XXX" 类型不存在 'IntrinsicAttributes & IntrinsicClassAttributes

Question

我正在使用 Typescript、React 和 Redux（所有运行都在 Electron 中）开发一个项目，当我包含一个 class 基于另一个组件并尝试在它们之间传递参数。松散地说，我有以下容器组件结构：

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);

显然，我只包括基础知识，这两个 class 还有更多内容，但是当我尝试运行我看起来像什么时，我仍然遇到错误有效代码。我得到的确切错误：

TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

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

当我从 ContainerComponent 的代码中排除 ChildComponent 道具时，它呈现得很好（除了我的 ChildComponent 没有关键道具）但是在 JSX Typescript 中拒绝编译它。我认为这可能与基于 this article 的连接包装有关，但那篇文章中的问题出现在 index.tsx 文件中并且是提供者的问题，我遇到了问题别处。

Answer 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,
    };
})

这里定义connect的地方https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings/react-redux/react-redux.d.ts#L6-L36

为什么？

您使用的定义似乎已过时或无效（可能编写不当）。

Answer 2

所以在阅读了一些相关的答案（特别是 and 并查看了@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);

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

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

Answer 3

仔细检查新添加的对象类型。当对象类型与预期不完全一致时，将抛出此类错误。

Ex.组件中提到的道具类型必须与传递给该组件的道具类型相匹配。

Answer 4

让您的子组件扩展 React.Component 为您想要的类型或“任何”类型。例如：“extends React.Component<any> {...}”

export class ChildComponent extends React.Component<T> {
 render() {
  return (
    <button className="square">
      {this.props.value}
    </button>
  );
 }
}

在父组件中，您可以传递值，例如：

renderSquare(i: Number) { return <ChildComponent value={i}/>; }

查看https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/class_components/了解更多信息

Answer 5

就我而言，我正在构建一个打字稿组件，该组件导入了 javascript 中使用 connect.

的组件

这是我修复错误的快速方法。

// User is a javascript component
import _User from "./User";

// Inject types that this component accepts
const User = _User as unknown as React.JSXElementConstructor<{
 userId: string
}>;

const UserProfile = () => {
  const user = useCurrentUser();
  return (
    <div className="flex items-center justify-center">
      <User userId={user.userId} />
    </div>
  );
}

希望对您有所帮助！

Typescript + React/Redux: 属性 "XXX" 类型不存在 'IntrinsicAttributes & IntrinsicClassAttributes

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

jsx

typescript

reactjs

electron

redux

为什么？