我正在使用Typescript、React和Redux(都在Electron中运行)进行一个项目,当我在另一个基于类的组件中包含一个组件并试图在它们之间传递参数时,我遇到了一个问题.粗略地说,我为容器组件提供了以下 struct :

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

显然,我只包含了基础知识,这两个类都有更多内容,但当我try 运行我认为有效的代码时,仍然会出现错误.我得到的确切错误是:

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

当我第一次遇到这个错误时,我认为这是因为我没有传递一个定义我的props 的接口,但是我创建了这个接口(正如你在上面看到的),它仍然不起作用.我在想,我是不是错过了什么?

当我从ContainerComponent中的代码中排除ChildComponent属性时,它呈现的很好(除了我的ChildComponent没有关键属性之外),但在JSX Typescript中,它拒绝编译它.我认为这可能与基于this article的连接包装有关,但那篇文章中的问题发生在索引中.tsx文件和服务Provider 有问题,我在其他地方遇到了问题.

推荐答案

因此,在阅读了一些相关的答案(特别是this onethis one,并查看@basarat对这个问题的回答后,我设法找到了一些适合我的答案.在我相对较新的React眼中,Connect似乎没有为容器组件提供明确的接口,所以它被props 弄糊涂了,它想通过.

因此,容器组件保持不变,但子组件发生了一些变化:

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 似乎是可行的,并且两个组件都得到了正确的渲染.

NOTE:我知道这是一个非常简单的答案,我不确定为什么会这样,所以如果一个经验更丰富的忍者想对这个答案略知一二,我很乐意修改它.

Typescript相关问答推荐

相交TypScript中的对象和接口

实现忽略了JSSOM中的doctor.body.innerHTML集

错误:note_modules/@types/note/globals.d.ts:72:13 -错误TS 2403:后续变量声明必须具有相同的类型

类型{...}的TypeScript参数不能赋给类型为never的参数''

如何在Typescript 中输入两个相互关联的变量?

路由链接不会导航到指定router-outlet 的延迟加载模块

在不更改类型签名的情况下在数组并集上映射文字

TypeScrip 5.3和5.4-对`Readonly<;[...number[],字符串]>;`的测试版处理:有什么变化?

为什么我的条件类型不能像我预期的那样工作?

限制返回联合的TS函数的返回类型

类型脚本可以推断哪个类型作为参数传递到联合类型中吗?

@TANSTACK/REACT-QUERY中发生Mutations 后的数据刷新问题

类型脚本-处理值或返回值的函数

Angular 16将独立组件作为对话框加载,而不进行布线或预加载

从类型脚本中元组的尾部获取第n个类型

为什么TS2339;TS2339;TS2339:类型A上不存在属性a?

如何在打字角react 式中补齐表格组

如何将通用接口的键正确设置为接口的键

TS不能自己推断函数返回类型

打字:注解`是字符串`而不是`布尔`?