解决此错误：使用 JSX 时，\'React\' 必须在范围内答案

【问题标题】：Resolving this error: 'React' must be in scope when using JSX解决此错误：使用 JSX 时，\'React\' 必须在范围内
【发布时间】：2022-11-17 17:32:04
【问题描述】：

我正在使用 React18.2.0 并且在运行我的项目时出现如下所示的错误

我看到一些解决方案建议如果我正在使用 Eslint（我就是），我应该在规则中禁用反应范围。我的 Eslint 配置文件如下所示，但它不起作用。

另一个解决方案是添加 import React from "react"; 这可行，但是，从文档中我们不需要再从 React17 向上包含它。所以我不知道为什么我仍然有这个错误。

任何援助将不胜感激

【问题讨论】：

在 .eslintrc.js / .eslintrc.json 中添加以下规则以忽略此类错误规则：{ // 抑制文件中缺少“import React”的错误 "react/react-in-jsx-scope": "off", //允许 js 文件中的 jsx 语法（对于 next.js 项目） "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //应该添加 " .ts" 如果打字稿项目 }

【解决方案1】：

您需要将以下行添加到您的 .eslintrc：

{
  "extends": ["plugin:react/jsx-runtime"]
}

然后只在你的顶级文件中导入 React 一次，比如 App.jsx - 不需要在其他任何地方导入它，除非你需要像 useEffect 这样的 API 等。

【讨论】：