本文旨在解决React 17及更高版本中，即使JSX不再需要显式导入React，ESLint仍报告“’React’ is not defined”的常见编译错误。核心问题在于ESLint的默认规则与React 17引入的新JSX转换机制不兼容。文章将详细解释错误原因，并提供通过修改ESLint配置文件来禁用相关规则的解决方案，确保代码在符合新规范的同时顺利通过ESLint检查。
理解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，代码会变得更加简洁：
// 无需导入 Reactfunction 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编写体验。
以上就是解决React 17+中ESLint关于’React’未定义错误的指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1511485.html
微信扫一扫 
支付宝扫一扫 
