TS2786“组件”不能用作 JSX 组件答案

【问题标题】：TS2786 'Component' cannot be used as a JSX componentTS2786“组件”不能用作 JSX 组件
【发布时间】：2022-06-20 19:23:09
【问题描述】：

我有一个无法编译的 React Typescript 应用程序。许多组件都有一个渲染方法，该方法被键入以返回React.ReactNode 或React.ReactElement。编译时报很多类似下面的错误：

TS2786: 'MessagesWidget' cannot be used as a JSX component.
 Its instance type 'MessagesWidget' is not a valid JSX element.
 The types returned by 'render()' are incompatible between these types.
 Type 'React.ReactNode' is not assignable to type 'import("/home/node/app/node_modules/@types/react-calendar/node_modules/@types/react/index").ReactNode'.

为什么编译器期望 ReactNode 由与 react-calendar 捆绑的类型定义？我确实安装了 @types/react-dom 作为开发依赖项。

其他可能相关的信息：

这个项目直到几天前还在编译，当编译开始失败时没有代码更改，所以我怀疑包更新触发了这个（即使这不是根本原因）。在编译开始失败的时间窗口中更新的唯一依赖项是@types/react 和@types/react-dom。但是，将这些软件包回滚到旧版本并不能解决问题。
将我的组件渲染方法更改为返回 JSX.Element 可消除编译器错误，但应用程序中有第三方组件无法做到这一点。

【问题讨论】：

React.ReactNode 绝对是 react 组件的 render 方法的正确返回类型，所以这很奇怪。但如果没有a minimal example,，我不确定我们是否能帮上大忙。
我今天弹出了完全相同的问题，除了我的导入来自react-dom 或react-transition-group。 types 包肯定有问题。在此期间我刚刚添加了@ts-ignore。
我们在我们的项目中看到了这一点。我会努力将@types 修复为旧版本。

标签： reactjs typescript react-dom tsx

【解决方案1】：

我有一个解决方案，似乎 18.0.1 类型定义中有大量重大更改。

和你一样，我无法通过回滚到早期版本来解决它，但调查让我发现这是因为“react-router”等引入了“18.0.1”版本。

为了解决这个问题，我在 package.json 中添加了以下内容

  "resolutions": {
    "@types/react": "17.0.14",
    "@types/react-dom": "17.0.14"
  },

然后我清除了我的节点模块和我的包缓存，然后重新运行 yarn 以提取新的包。

解决方案部分用于纱线（我使用）。如果您使用 NPM，我认为您可以使用“覆盖”而不是“分辨率”。

【讨论】：

我在 lerna 的 yarn 工作区 monorepo 上。将其添加到根 package.json "resolutions": { "**/@types/react": "^16.9.0", "**/@types/react-dom": "^16.9.8" } 适用于我。来自：github.com/yarnpkg/yarn/issues/503fr9
很遗憾不适合我
还是不行
你用的是yarn还是npm？可能是另一个导致问题的软件包。

【解决方案2】：

我在实现一个非常简单的“延迟”组件时得到了这个：

export const Component = ({ children }) => {
    //...do stuff
    return ready ? children : null
}

解决方案是将孩子包装在一个片段中：

return ready ? <>{children}</> : null

【讨论】：

【解决方案3】：

删除package-lock.json。
删除node_modules目录。

添加到您的package.json：

"resolutions": {
    "@types/react": "17.0.14",
    "@types/react-dom": "17.0.14"
 }

使用npm i 重新安装依赖项。

【讨论】：