解决 React 应用中 "'jsx' must be in scope" 错误

本文旨在帮助开发者解决 React 应用中常见的 "'jsx' must be in scope when using JSXeslintreact/react-in-jsx-scope" 错误。我们将深入探讨该错误的原因，解释 @jsx pragma 的作用，并提供清晰的解决方案，包括如何正确导入 jsx 函数以及何时移除该 pragma，确保你的 React 应用能够顺利编译和运行。

在 React 开发过程中，你可能会遇到一个令人困惑的错误：'jsx' must be in scope when using JSXeslintreact/react-in-jsx-scope。 即使你在 ESLint 中关闭了 react/react-in-jsx-scope 规则，编译时仍然可能遇到 jsx is not defined 的错误。 这个问题通常与 @jsx pragma 的使用方式有关。

理解 @jsx Pragma

@jsx pragma 是一个指示 JSX Babel 插件如何转换 JSX 表达式的指令。 默认情况下，JSX Babel 插件会将 JSX 转换为 React.createElement 调用。 然而，在某些情况下，你可能需要使用不同的函数来处理 JSX，例如，在使用 Emotion 库的 css prop 时。

Emotion 库允许你使用 css prop 在 React 组件中编写 CSS。 为了让 Emotion 正确处理 JSX，你需要使用 @jsx pragma 来告诉 Babel 使用 Emotion 提供的 jsx 函数，而不是 React.createElement。

示例：使用 Emotion 的 css Prop

/** @jsx jsx */
import { jsx } from '@emotion/react';

function MyComponent() {
  return (
    <p
      css={{
        color: 'blue',
      }}
    >
      Hello, Emotion!
    </p>
  );
}

export default MyComponent;

在这个例子中，/** @jsx jsx */ 指令告诉 Babel 使用 @emotion/react 库提供的 jsx 函数。 同时，你必须显式导入 jsx 函数：import { jsx } from '@emotion/react';。 否则，你将遇到 jsx is not defined 的错误。

解决方案

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

要解决 'jsx' must be in scope 错误，你需要确保以下几点：

1. 如果使用 @jsx pragma，则必须导入相应的 jsx 函数。 确保你从正确的包中导入 jsx 函数，例如 @emotion/react。

2. 如果不需要自定义 JSX 转换函数，则移除 @jsx pragma。 如果你没有使用 Emotion 或其他需要自定义 JSX 转换的库，那么你可以直接移除 /** @jsx jsx */ 指令。 移除后，Babel 将默认使用 React.createElement 来处理 JSX。 此时，你只需要确保导入 React：import React from 'react';

注意事项

• 检查你的代码中是否不小心添加了 @jsx pragma。 有时，开发者可能会在不了解其作用的情况下复制粘贴代码，从而引入该 pragma。
• 确保你的 Babel 配置正确。 如果你使用的是自定义 Babel 配置，请检查 @babel/plugin-transform-react-jsx 插件是否已正确配置。

总结

'jsx' must be in scope 错误通常是由于 @jsx pragma 的使用不当造成的。 通过理解 @jsx pragma 的作用，并根据你的项目需求正确导入 jsx 函数或移除该 pragma，你可以轻松解决这个问题，确保你的 React 应用能够正常编译和运行。 如果你没有使用任何自定义 JSX 转换库，最简单的解决方法就是移除 @jsx pragma，并确保导入了 React。

以上就是解决 React 应用中 "'jsx' must be in scope" 错误的详细内容，更多请关注php中文网其它相关文章！