理解React 17+的JSX转换机制
自react 17版本起，react引入了一个新的jsx转换（new jsx transform）。在此之前，当开发者在javascript文件中使用jsx语法时，构建工具（如babel）会将jsx转换为react.createelement()函数的调用。这意味着，即使代码中没有直接使用react对象，只要使用了jsx，就必须在文件顶部显式地import react from 'react';，以确保react.createelement在作用域内。
例如，以下JSX代码：
function App() {
return Hello, World!
;
}在旧的JSX转换下，会被编译成：
import React from 'react'; // 必须导入
function App() {
return React.createElement("h1", null, "Hello, World!");
}然而，在React 17及更高版本中，新的JSX转换机制不再需要React.createElement。相反，它会导入一个特殊的函数（例如来自react/jsx-runtime），并直接使用它来创建元素。这意味着，在文件顶部不再需要显式导入React，代码会变得更加简洁：
// 无需导入 React
function App() {
return Hello, World!
;
}在新的JSX转换下，会被编译成（逻辑上）：
import { jsx as _jsx } from 'react/jsx-runtime'; // 由构建工具自动添加
function App() {
return _jsx("h1", null, "Hello, World!");
}这一改进旨在简化React开发者的工作流程，减少不必要的导入。
错误根源：ESLint与新JSX转换的不兼容
尽管React运行时不再需要import React，但ESLint作为一个静态代码分析工具，其默认配置中的某些规则可能仍然遵循旧的JSX转换逻辑。当ESLint检测到JSX代码，但未在当前文件作用域中找到React的导入或定义时，就会报告“'React' is not defined”的错误。
具体来说，ESLint的eslint-plugin-react插件中包含以下两个规则，它们是导致此问题的罪魁祸首：
- react/jsx-uses-react: 此规则确保当文件中使用了JSX时，React变量被标记为已使用，以避免no-unused-vars等规则误报。
- react/react-in-jsx-scope: 此规则强制要求在使用JSX的文件中必须导入React。
当你在React 17+的项目中移除import React from 'react';时，ESLint会因为这些规则的存在而抛出错误，即使你的代码在运行时是完全正确的。
解决方案：修改ESLint配置
解决此问题的方法是修改你的ESLint配置文件（通常是.eslintrc.js、.eslintrc.json或package.json中的eslintConfig字段），禁用上述两个与新JSX转换不兼容的ESLint规则。
你需要在ESLint配置文件的rules部分添加或修改以下配置：
// .eslintrc.json 或 .eslintrc.js
{
"extends": [
// ... 其他继承的配置，例如 'react-app' 或 'plugin:react/recommended'
],
"rules": {
// 禁用 'react/jsx-uses-react' 规则
"react/jsx-uses-react": "off",
// 禁用 'react/react-in-jsx-scope' 规则
"react/react-in-jsx-scope": "off",
// ... 其他自定义规则
}
}示例：在.eslintrc.js文件中
如果你使用的是JavaScript格式的ESLint配置文件，内容可能如下：
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended', // 通常会包含这两个规则
'plugin:react-hooks/recommended'
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: [
'react'
],
settings: {
react: {
version: 'detect', // 自动检测 React 版本
},
},
rules: {
// 禁用 ESLint 针对 React 17+ 新 JSX 转换的不必要规则
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
};将这些规则设置为"off"后，ESLint将不再检查React是否被导入或使用，从而允许你的代码在不导入React的情况下使用JSX，并顺利通过Linting检查。
注意事项与最佳实践
- 确认React版本和JSX转换配置： 确保你的项目确实在使用React 17或更高版本，并且你的构建工具（如Babel）已正确配置为使用新的JSX转换。对于Create React App (CRA) 创建的项目，这些通常是默认配置好的。
- eslint-plugin-react版本： 确保你的eslint-plugin-react版本是最新的，因为它可能包含对新JSX转换的更好支持。虽然禁用规则是直接的解决方案，但更新插件有时也能解决类似问题。
- 项目迁移： 如果你是从旧的React项目迁移到React 17+，并且希望移除所有不必要的import React语句，那么禁用这些ESLint规则是必不可少的一步。
- 理解规则作用： 禁用这些规则并非意味着它们毫无用处。在React 17之前的项目中，它们对于确保代码的正确性和一致性非常重要。因此，在不同的项目背景下，应根据实际情况调整ESLint配置。
通过以上步骤，你可以有效地解决在React 17+项目中因ESLint规则与新JSX转换机制不兼容而导致的“'React' is not defined”错误，从而享受更简洁的JSX编写体验。
