如何修复React Must Be in Scope When Using *** X错误

使用 有时会很棘手，尤其是在处理不容易理解的错误时。

开发人员可能会遇到的一个常见错误是 React must be in scope when using *** X 错误。如果在使用 的组件中没有正确导入或初始化 React，就会出现这种错误。

在本文中，我们将讨论导致该错误的原因，并提供如何修复该错误的解决方案。

React must be in scope when using *** X错误的原因是什么？

*** X（JavaScript XML）是一种语法扩展，允许您在 JavaScript 中编写类似 的代码。浏览器不理解 *** X，但像 Create React App 这样的预配置工具包在引擎盖下包含了一个 *** X 转换工具，可以将 *** X 代码转换为有效的 JavaScript 代码，浏览器可以解释这些代码。

在 17.0 之前的 React 版本中， *** X 转换器会在编译时将 *** X 转换为 React.createElement() 函数调用。这需要导入 React 才能使用 React 元素。在 React v17.0 中引入了新的 *** X 转换后，React 包的新入口点中的特殊函数将被自动导入，从而无需在每个显式使用 *** X 的文件中导入 React。

举例来说，让我们来看看下面的功能组件：

function App() {
return <h1>Welcome to WBOLT!</h1>;
}

在编译时，它会被转换成普通的 JavaScript：

function App() {
return React.createElement('h1', null, 'Welcome to WBOLT!');
}

由于 React 是未定义的，因此在使用 jsx 时总会出现 “‘react’ must be in scope when using jsx” 的错误。

修复react must be in scope when using jsx错误的 2 种 ***

根据您使用的 React 版本，有几种 *** 可以修复此错误。

• React v17 之前历史版本
• React v17 及更高版本

1. 包含或更正 React 导入声明（针对 React v17 之前版本的修复）

如果您使用的是旧版本的 React，则可能缺少 “react” 的导入语句或导入语句不正确。请确保文件顶部有正确的导入语句（”React” 上有大写的 “R”）：

// Wrong 
import react  from 'react';
// Correct 
import React  from 'react';

将功能组件转换为普通 后，就会变成这样：

import React  from 'react';
function App() {
return React.createElement('h1', null, 'Welcome to WBOLT!');
}

2. 更新 ESLint 配置（针对 React v17 及更高版本的修复）

在 React v17.0 中，引入了，它会自动从 React 包的新入口导入特殊函数，从而无需在每个显式使用 *** X 的文件中导入 React。

例如，下面是一个功能组件：

function App() {
return <h1>Welcome to WBOLT!</h1>;
}

这就是新的 *** X 转换编译成的内容：

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Welcome to WBOLT!' });
}

这意味着您不再需要在组件中导入 React 以使用 *** X。如果您在检查 package.json 文件以确认 React 版本后仍然收到此错误，则必须更新 。

在这个阶段，从技术上讲，这不再是 React 错误，而是 ESLint 错误。

注：您经常会在 React 项目中使用 ESLint 等线程工具，因为它会检查您的代码以检测潜在的错误，这些错误可能会在现在或将来破坏您的代码。该工具会在检测到文件周围有任何 *** X 时强制您导入 React。

如果您确定自己的 React 版本是 v17.0 或更高，那么就可以安全地禁用确保您在 React 中使用 *** X 时导入 React 的规则。

更新 ESLint 配置有两种主要方式。如果你有 .eslintrc.js 或 .eslintrc.json 文件。在 .eslintrc.js 文件中添加以下规则。

"rules": {
// ...
"react/react-in-jsx-scope": "off",
"react/jsx-uses-react": "off",
}

否则，你可以更新 package.json 文件中的 eslintConfig 对象：

{
"name": "quotes-circle",
// ...
"dependencies": {
// ...
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"rules": {
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
},
}

在上面的代码中， 规则已关闭，因此 ESLint 不会在你导入 React 失败时抛出错误。

至此，你应该已经彻底解决了 “‘react’ must be in scope when using jsx” 的错误。但也有可能因为某些原因，错误仍然存在。

让我们再看看几种修复 *** 。

修复react must be in scope when using jsx错误的其他3种 ***

假设错误仍然存在。以下是解决 “‘react’ must be in scope when using jsx” 错误的另外三种 *** 。

1. 更新 React-Scripts 的版本

在终端运行以下命令即可更新项目的 react-scripts 版本：

// npm
npm install react-scripts@latest
// yarn
yarn add react-scripts@latest

2. 删除 Node_modules 文件夹和 package-lock.json 文件

如果错误仍然存在，则可能是某些依赖项安装错误。你可以删除 node_modules 文件夹和 package-lock.json 文件（不是 package.json）来解决这个问题。然后运行以下命令重新安装软件包：

npm install

然后重启开发服务器。

3. 更新 React 和 React-Dom 的版本

最后，如果错误仍然存在，请使用下面的命令更新 react 和 react-dom 的版本：

// npm
npm install react@latest react-dom@latest
// if you use TypeScript
npm install --save-dev @types/react@latest @types/react-dom@latest
// OR
// Yarn
yarn add react@latest react-dom@latest
// if you use TypeScript
yarn add @types/react@latest @types/react-dom@latest --dev

目前可以肯定的是，这一错误将得到修复。

小结

“React must be in scope when using *** X” 错误是在使用 React 时可能遇到的常见问题。当文件中使用了 *** X 语法，但未正确导入或包含 React 库时，此错误主要发生在 React v17 的早期版本中。在 React v17 的较高版本中，当 ESLint 配置出错或 node_modules 文件夹中的某些依赖项安装错误时，也会出现该错误。

根据您正在使用的 React 版本，您可以使用不同的 *** 来修复此错误，我们在文章中对此进行了概述。

现在轮到你了： 您遇到过这个问题吗？你是如何解决的？你还使用过本文未涉及的其他 *** 吗？请在评论中告诉我们！