解决React 17+中JSX不再需要导入React时ESLint报错的问题

理解React 17+的JSX新转换机制

在React 17之前，当你在JSX中使用组件或元素时（例如<App />或<div>），Babel会将这些JSX语法转换为React.createElement()调用。这意味着在任何包含JSX的文件中，React对象都必须在作用域内，因此需要import React from 'react';。

从React 17开始，引入了“New JSX Transform”（新的JSX转换）。在新的转换机制下，Babel不再将JSX转换为React.createElement()，而是导入并调用由React运行时提供的特殊函数（例如_jsx）。这意味着在大多数情况下，你不再需要手动导入React来使用JSX。这不仅减少了样板代码，还有助于减小打包体积并提高运行时性能。

示例（旧 vs. 新 JSX 转换）:

旧转换 (React 16及以前):

// 需要 import React from 'react';
function MyComponent() {
  return <div>Hello</div>;
}
// 编译后大致为：
// function MyComponent() {
//   return React.createElement("div", null, "Hello");
// }

新转换 (React 17及以后):

// 通常不需要 import React from 'react';
function MyComponent() {
  return <div>Hello</div>;
}
// 编译后大致为：
// import { jsx as _jsx } from "react/jsx-runtime";
// function MyComponent() {
//   return _jsx("div", null, "Hello");
// }

为什么仍会出现“'React' is not defined”错误？

尽管React运行时不再需要显式导入React，但你的开发工具链中的ESLint可能会对此有不同的看法。ESLint是一个代码规范检查工具，它有自己的规则集。在React生态系统中，eslint-plugin-react插件包含了许多与React相关的规则，其中：

• react/jsx-uses-react: 检查JSX是否使用了React变量。如果检测到JSX但没有React变量被“使用”，它可能会认为React未定义。
• react/react-in-jsx-scope: 强制要求在包含JSX的文件中React必须在作用域内。

当这些规则仍然启用时，即使你的React版本支持新的JSX转换，ESLint仍会根据旧的转换逻辑进行检查，从而抛出'React' is not defined的错误。

解决方案：调整ESLint配置

解决此问题的核心在于告知ESLint，对于React 17+的新JSX转换，不再需要强制检查React的导入和作用域。这可以通过修改ESLint配置文件来实现。

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

通常，ESLint配置文件名为.eslintrc.js、.eslintrc.json或在package.json中定义。你需要找到并编辑你的ESLint配置。

步骤：

1. 定位ESLint配置文件： 在你的项目根目录下查找以下文件之一：

   • .eslintrc.js
   • .eslintrc.json
   • .eslintrc.yml
   • package.json (查找"eslintConfig"字段)

2. 修改规则： 在ESLint配置文件的rules部分，添加或修改以下两行，将其设置为"off"：

   // .eslintrc.json 示例
   {
     "env": {
       "browser": true,
       "es2021": true
     },
     "extends": [
       "eslint:recommended",
       "plugin:react/recommended", // 确保你已安装并配置了 eslint-plugin-react
       "plugin:react/jsx-runtime" // 推荐添加此项，明确告知ESLint使用新的JSX运行时
     ],
     "parserOptions": {
       "ecmaFeatures": {
         "jsx": true
       },
       "ecmaVersion": "latest",
       "sourceType": "module"
     },
     "settings": {
       "react": {
         "version": "detect" // 自动检测React版本
       }
     },
     "plugins": [
       "react"
     ],
     "rules": {
       // 关闭与新JSX转换冲突的规则
       "react/jsx-uses-react": "off",
       "react/react-in-jsx-scope": "off"
       // 其他规则...
     }
   }

   登录后复制

   重要提示：

   • 确保你的extends数组中包含"plugin:react/recommended"。
   • 为了更好地支持新的JSX转换，强烈建议在extends数组中添加"plugin:react/jsx-runtime"。这个扩展会为你自动处理这些规则的禁用，并且通常是更推荐的做法，因为它会根据ESLint插件的版本自动适配。如果你使用了"plugin:react/jsx-runtime"，你可能就不需要手动禁用react/jsx-uses-react和react/react-in-jsx-scope了，因为jsx-runtime会为你处理。但为了确保兼容性，手动禁用也是一个明确的解决方案。
   • 如果你的项目是使用Create React App (CRA)创建的，CRA 4.0+已经默认集成了新的JSX转换，并且其ESLint配置也已经相应调整。如果你遇到此问题，可能是在CRA项目上进行了自定义的ESLint配置覆盖，或者项目并非由CRA创建。

示例代码（问题场景与修正）

原始导致错误的代码 (src/index.js):

// import React from 'react'; // 被注释掉，导致ESLint报错
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode> {/* ESLint在此处报错：'React' is not defined */}
    <App />
  </React.StrictMode>
);

修正ESLint配置后的效果：

在.eslintrc.json中添加或修改规则后，即使import React from 'react';被注释掉，ESLint也将不再对此报错，代码将能成功编译。

注意事项与总结

1. 明确问题来源： 牢记此错误并非React运行时的问题，而是ESLint的检查规则与React新JSX转换机制之间的不匹配。
2. ESLint配置的重要性： 正确配置ESLint对于维护代码质量和开发效率至关重要。了解每个规则的含义有助于你更好地控制代码风格和潜在问题。
3. plugin:react/jsx-runtime： 对于使用React 17+新JSX转换的项目，最推荐的做法是确保ESLint配置中包含了"plugin:react/jsx-runtime"扩展。这通常会为你自动处理相关规则的禁用，并确保ESLint与新的转换机制保持同步。
4. 按需导入React： 尽管JSX不再强制要求导入React，但在某些情况下，你可能仍然需要导入它。例如，如果你需要使用React.useState、React.useEffect等钩子，或者需要引用React.Fragment等特定React API，那么你仍然需要显式导入React。

通过上述调整，你可以在享受React 17+带来的新JSX转换便利的同时，避免不必要的ESLint报错，确保开发流程的顺畅。

以上就是解决React 17+中JSX不再需要导入React时ESLint报错的问题的详细内容，更多请关注php中文网其它相关文章！