0

我正在尝试学习 React 18 中的一些新功能，例如SuspenseListand newuseId钩子，但我似乎一遍又一遍地遇到同样的错误：

Module '"react"' has no exported member 'SuspenseList'.  TS2305

这就是我的 package.json 的样子：

  "dependencies": {
    "bootstrap": "^5.1.1",
    "history": "^5.0.1",
    "react": "^18.0.0-rc.0",
    "react-dom": "^18.0.0-rc.0",
    "react-error-boundary": "^3.1.3",
    "react-router-dom": "^6.0.0-beta.5",
    "swr": "^1.0.1",
    "web-vitals": "^1.1.2"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.27",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.9",
    "prettier": "^2.4.1",
    "react-scripts": "4.0.3",
    "typescript": "^4.4.3"
  },

我现在不知道该怎么做，因为我已经安装了 React 18 的 RC 版本，根据工作组 GitHub 讨论板，它应该是最新的。

4

1 回答 1

0

您从 TypeScript 编译器中收到该错误，因为即使您已经安装react@next了@types/react@17. SuspenseList实现中确实存在，但编译器不知道。

虽然没有等效的@types/react@next安装，@types/react但确实包括：

  • next.d.ts（肯定会出现在 v18 中的类型）；和
  • experimental.d.ts（目前处于实验版本中的类型）。

后者的源代码（因为SuspenseList和整个并发模式 API仍然是实验性的）告诉你如何在项目中使用这些类型：

experimental这些是React 构建中存在但尚未稳定构建的事物的类型。

一旦它们被提升到稳定状态，它们就可以被移动到主索引文件中。

在实际项目中加载此处声明的类型，有以下三种方式。如果您在该部分中tsconfig.json已经有一个"types" 数组，最简单的方法"compilerOptions"是添加"react/experimental"到"types"数组中。

或者，可以从 TypeScript 文件中使用特定的导入语法。这个模块在现实中并不存在，这就是为什么它{}很重要：

import {} from 'react/experimental'

也可以通过三斜杠引用来包含它：

/// <reference types="react/experimental" />

导入或引用只需要在项目中的任何位置出现一次。

于 2021-12-15T11:02:33.527 回答