理解React 17+的JSX新转换机制
在React 17之前，当你在JSX中使用组件或元素时（例如
从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 Hello;
}
// 编译后大致为：
// function MyComponent() {
// return React.createElement("div", null, "Hello");
// }新转换 (React 17及以后):
// 通常不需要 import React from 'react';
function MyComponent() {
return Hello;
}
// 编译后大致为：
// 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配置文件来实现。
通常，ESLint配置文件名为.eslintrc.js、.eslintrc.json或在package.json中定义。你需要找到并编辑你的ESLint配置。
步骤：
-
定位ESLint配置文件： 在你的项目根目录下查找以下文件之一：
- .eslintrc.js
- .eslintrc.json
- .eslintrc.yml
- package.json (查找"eslintConfig"字段)
-
修改规则： 在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(
{/* ESLint在此处报错：'React' is not defined */}
);修正ESLint配置后的效果：
在.eslintrc.json中添加或修改规则后，即使import React from 'react';被注释掉，ESLint也将不再对此报错，代码将能成功编译。
注意事项与总结
- 明确问题来源： 牢记此错误并非React运行时的问题，而是ESLint的检查规则与React新JSX转换机制之间的不匹配。
- ESLint配置的重要性： 正确配置ESLint对于维护代码质量和开发效率至关重要。了解每个规则的含义有助于你更好地控制代码风格和潜在问题。
- plugin:react/jsx-runtime： 对于使用React 17+新JSX转换的项目，最推荐的做法是确保ESLint配置中包含了"plugin:react/jsx-runtime"扩展。这通常会为你自动处理相关规则的禁用，并确保ESLint与新的转换机制保持同步。
- 按需导入React： 尽管JSX不再强制要求导入React，但在某些情况下，你可能仍然需要导入它。例如，如果你需要使用React.useState、React.useEffect等钩子，或者需要引用React.Fragment等特定React API，那么你仍然需要显式导入React。
通过上述调整，你可以在享受React 17+带来的新JSX转换便利的同时，避免不必要的ESLint报错，确保开发流程的顺畅。
