React 17及更高版本引入了新的JSX转换机制，使得在组件文件中使用JSX时不再强制要求显式导入React。然而，开发者在实际项目中可能会遇到ESLint报错“’React’ is not defined”，这通常是由于ESLint配置中的特定规则（如react/jsx-uses-react和react/react-in-jsx-scope）未适应新的JSX转换而导致的。本文将详细解释此问题，并提供通过调整ESLint配置来解决该报错的专业教程。
理解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配置文件来实现。
爱图表
AI驱动的智能化图表创作平台
305 查看详情
通常，ESLint配置文件名为.eslintrc.js、.eslintrc.json或在package.json中定义。你需要找到并编辑你的ESLint配置。
步骤：
定位ESLint配置文件：在你的项目根目录下查找以下文件之一：
.eslintrc.js.eslintrc.json.eslintrc.ymlpackage.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报错，确保开发流程的顺畅。
以上就是解决React 17+中JSX不再需要导入React时ESLint报错的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/752819.html
微信扫一扫
支付宝扫一扫
