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

2024-03-21

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

当我第一次遇到这个错误时,我认为这是因为我没有传入定义我的 props 的接口,但我创建了它(如您在上面看到的),但它仍然不起作用。我想知道,我缺少什么吗?

当我从 ContainerComponent 的代码中排除 ChildComponent 属性时,它渲染得很好(除了我的 ChildComponent 没有关键属性),但在 JSX Typescript 中使用它时拒绝编译它。我认为这可能与基于的连接包装有关本文 http://www.mattgreer.org/articles/typescript-react-and-redux/,但该文章中的问题发生在 index.tsx 文件中,并且是提供商的问题,而我在其他地方遇到了问题。


因此,在阅读了一些相关答案后(具体来说this one https://stackoverflow.com/questions/38243652/react-redux-connect-issues-in-typescript?rq=1 and this one https://stackoverflow.com/questions/40671978/typescript-struggles-with-redux-containers?rq=1看看@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 似乎有效,并且两个组件都正确渲染。

NOTE:我知道这是一个非常简单的答案,我不太确定为什么它有效,所以如果更有经验的 React 忍者想要在这个答案上放弃一些知识,我很乐意修改它。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Typescript + React/Redux:类型“IntrinsicAttributes”和“IntrinsicClassAttributes”上不存在属性“XXX” 的相关文章

随机推荐

  • 启动时将 par 重置为默认值

    通常 当我制作自己的绘图函数时 我会制作一个构造 op lt par mypar myvalue on exit par op 这是恢复的标准方法par到之前的值 想象一下 您一直在运行一些确实更改了某些参数的函数 并且您需要在 R 中启动
  • Ruby on Rails:没有视图的操作

    我有一个我认为非常简单的问题 我有 PhP 背景 并且过去一直这样做 所以我可能以错误的方式看待这个问题 我正在尝试在 RoR 中创建一个 ajax 处理程序 当用户单击按钮时 javascript 会触发 POST 并使用 jQuery
  • 编写 django-piston 客户端的正确方法是什么?

    我已经阅读了很多关于 django piston 的文章 并使用它为我正在开发的应用程序制作 API 但我对世界的客户端很着迷 我已经编写了处理程序和 uri 映射 并且可以随心所欲地返回 JSON 或 XML 我陷入困境的是现在该怎么办
  • cygwin下无法访问jarfile

    我知道这里有很多 无法访问 jarfile 问题 但我确实觉得这足以保证它自己的线程 我正在编写一个演练 该演练的一部分涉及安装 Cygwin 并运行 jar 文件 问题是这个 jar 文件需要从多个目录调用 而不是让我的读者每次需要运行它
  • 为什么 MATLAB 中允许使用多个连续的加号语法?

    有谁知道为什么这在 MATLAB 中有效 gt gt 1 2 ans 3 来自 C Python Java 等语言的编码 我发现这根本就行得通 这是最违反直觉的 想必解析器有一些我不明白的重要内容 有一个区别plus https mathw
  • python 中的前导零[重复]

    这个问题在这里已经有答案了 Python 似乎能够接受除 08 或 09 之外的任何数字的前导零 例如 a 04 在解释器中工作但是 a 08 returns SyntaxError invalid token 我在 OSX 上使用 pyt
  • 类常量的 PHP 表达式

    我试图找出为什么我会遇到此代码的异常 class Test const test Two rows 我在包含 const 的行上遇到异常 解析错误 语法错误 意外的 期望 或 在 home BZUMUL prog php 第 X 行 我本来
  • Java 客户端/服务器套接字

    我从 java 套接字开始 并且有奇怪的 缺乏 输出 这是我的套接字方法的来源 客户端源码 public void loginToServer String host String usnm try Socket testClient ne
  • Indy 可以运行 Javascript 吗?

    有一种名为 AnyChart 的软件产品 非常适合在网页中嵌入基于 Flashed 的图表 AnyCharts 还可以导出为 PNG 文件格式 这是一个例子
  • 如何使用 sublime 在终端上运行 ruby

    我什至不确定这个问题是否正确 我正在以下链接上编写 ruby 教程 www youtube com watch v Dji9ALCgfpM 他在sublime上编写代码 并在终端上显示运行的代码 我曾经在 Integrated ruby i
  • 带选择标签的 dataTables 列过滤插件

    我正在使用数据表 v1 92 以及列过滤插件 v1 5 0 问题 我需要为单个列过滤创建下拉列表 其标记将是
  • 如何上传图片并将其保存到数据库中? [复制]

    这个问题在这里已经有答案了 我必须使用 JavaScript 创建一个表单 用户将上传一个 JPG 文件并与其他信息 例如姓名 电子邮件等 一起提交 当用户单击 提交 时 表单中的所有信息都将加载到值对象中 对于图像文件我将其设置为byte
  • 在 JavaFX 中显示字符串/标签

    我需要帮助弄清楚如何在程序中显示文本 以便它可以在我创建的多边形形状的中间显示 停止 我想做的是创建一个停车标志 我已经负责创建和显示该停止标志 所以现在我只需要在 t 中显示 停止 package application public c
  • 在 django-rest 框架中使用原始 SQL?

    我使用 Django 1 8 和带有表和物化视图的 Postgres 9 4 后端 我有一个 80GB 的表 名为spending包含支出项目 每个项目都有一个组织代码和一个区域代码 class Prescription models Mo
  • C++11 中的可变参数模板和多重继承

    我正在努力实现这样的目标 我有一个模板化基类 我想动态继承它 template
  • MSVC 的 open_memstream 的等效项

    我在用打开内存流在我的一个库中 但我想将该库移植到 MSVC 似乎没有可用的等效功能 但是有足够相似的功能吗 What 打开内存流所做的是它需要一个 char 目的地和大小并返回一个您可以写入的 FILE 数据存储在动态分配的缓冲区中 可从
  • 如何在 OS X 中包含 FFI?

    我在构建时遇到问题这个项目 https github com metaeducation ren c启用 FFI 扩展 为了隔离问题 我正在尝试编译这个例子 http www chiark greenend org uk doc libff
  • OSError:图像文件被截断

    当我处理一堆图像时 其中一个图像出现此错误 File home tensorflowpython firstmodel yololoss py line 153 in data generator image box get random
  • ASP.NET MVC - 如何根据登录用户的角色权限隐藏或显示链接/按钮?

    我正在使用 ASP NET MVC4 这是我的用户角色 1 Administrator 2 L1 Admin 3 L2 Admin 管理员组用户有设置权限 用于添加 权限设置 查看日志 错误报告等 如果用户是管理员组的成员 他只能看到与上述
  • Typescript + React/Redux:类型“IntrinsicAttributes”和“IntrinsicClassAttributes”上不存在属性“XXX”

    我正在开发一个使用 Typescript React 和 Redux 全部在 Electron 中运行 的项目 当我将一个基于类的组件包含在另一个组件中并尝试在它们之间传递参数时 我遇到了问题 宽松地说 我的容器组件结构如下 class C