本文旨在帮助开发者解决 React 应用中常见的 "jsx must be in scope" 错误。该错误通常与 JSX 编译和使用的 React 版本有关。文章将详细解释 @jsx pragma 的作用，以及如何正确引入或移除它，从而解决编译错误。通过本文，读者将能够理解 JSX 的工作原理，并掌握解决类似问题的有效方法。
在 React 应用开发过程中，你可能会遇到 "jsx must be in scope when using JSX" 这样的错误。这个错误通常发生在 React 17 及以上版本，并且与 JSX 的编译方式有关。本文将深入探讨这个错误的原因，并提供详细的解决方案。
理解 @jsx Pragma
@jsx pragma 告诉 JSX Babel 插件应该使用哪个函数来编译 JSX 表达式。默认情况下，它使用 React.createElement。然而，在一些库（例如 Emotion）中，你可能需要将其更改为其他函数，比如 jsx。
如果你在代码中看到了类似以下的代码：
/** @jsx jsx */
import { jsx } from '@emotion/react';
// ...
<p
css={{
color: 'blue',
}}
>
Hello World!
</p>这意味着你正在使用 Emotion 的 css prop，并且需要使用 Emotion 提供的 jsx 函数来编译 JSX。
解决方案
解决 "jsx must be in scope" 错误的关键在于正确处理 @jsx pragma 和相应的导入。以下是几种可能的解决方案：
-
如果使用 Emotion 或其他类似的库:
确保你已经安装了相应的库（例如 @emotion/react）。
npm install @emotion/react
确保你已经导入了正确的 jsx 函数，并且 @jsx pragma 指向该函数。
/** @jsx jsx */ import { jsx } from '@emotion/react'; -
如果不需要自定义的 JSX 编译函数:
如果你的代码中存在 @jsx pragma，但你并不需要使用 Emotion 或其他类似的库，那么你可以直接移除该行代码。
// 移除 /** @jsx jsx */ 这一行 import React from 'react'; // 确保 React 被正确导入 // ... <div>Hello World!</div>
移除 @jsx pragma 后，JSX 将默认使用 React.createElement 进行编译。因此，你需要确保 React 被正确导入。
-
配置 ESLint (可选):
如果你仍然希望使用 ESLint，并且不想看到 "react/react-in-jsx-scope" 错误，你可以继续在 .eslintrc.js 中添加以下配置：
module.exports = { // ... rules: { 'react/react-in-jsx-scope': 'off', }, };但是，请注意，这只是隐藏了 ESLint 的警告，并不能解决实际的编译问题。确保你已经按照上述方法正确处理了 @jsx pragma 和导入。
总结
解决 React 应用中 "jsx must be in scope" 错误的关键在于理解 @jsx pragma 的作用，并根据你的实际需求正确引入或移除它。如果你使用了 Emotion 或其他类似的库，确保你已经安装了相应的库，并且导入了正确的 jsx 函数。如果不需要自定义的 JSX 编译函数，可以直接移除 @jsx pragma，并确保 React 被正确导入。通过这些方法，你就可以轻松解决这个常见的错误，并顺利进行 React 应用的开发。
