解决此错误：使用 JSX 时“React”必须在范围内

Question

我使用的是React18.2.0，运行项目时出现如下错误

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

另一个解决方案是添加

import React from "react";

这是可行的，但是，从文档来看，从 React17 开始，我们不再需要包含它。所以我不知道为什么我仍然有这个错误。

如有任何帮助，我们将不胜感激

这是我的 package.json 文件

Answer 1

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

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

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

useEffect

等这样的 API。

Answer 2

您必须将

'jsx-runtime'

添加到您的 ESLint 配置文件中 - 对于新的平面结构，您的

eslint.config.js

文件应配置如下：

// Other imports
pluginReact from "eslint-plugin-react";

export default [

  // (...)

  pluginReact.configs.flat['jsx-runtime'],

  // (...)

];