TS2786 'Component' 不能用作 JSX 组件

Question

我有一个无法编译的 React Typescript 应用程序。许多组件都有一个渲染方法，类型为 return 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 作为开发依赖项。

其他可能相关的信息：

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

Answer 1

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

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

为了解决这个问题，我在 package.json

中添加了以下内容

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

然后我清除了我的 node-modules 和我的包缓存，然后 re-ran yarn 来提取新包。

决议部分是针对纱线（我使用的）。如果您使用 NPM，我认为您可以使用 'overrides' 而不是 'resolutions'。

TS2786 'Component' 不能用作 JSX 组件

TS2786 'Component' cannot be used as a JSX component

typescript

reactjs

tsx

react-dom