React项目运行正常但编辑器提示“React已定义未使用”错误求助

问题原因 #

• React 17及以上版本支持JSX自动转换，无需手动在文件顶部写import React from 'react'，项目运行时会自动处理JSX语法，所以你的代码能正常运行。
• 编辑器的代码检查工具（ESLint）规则未适配这个版本特性，仍在检查React是否被显式调用，因此抛出“React已定义但未使用”的提示。

解决方法 #

• 删除无用的import语句
  如果代码里没用到React的API（比如React.useState、React.createElement），直接删掉行首的import React from 'react'，编辑器的红线会立即消失，不影响项目运行。

• 更新ESLint配置适配新版本
  若需要保留import语句（后续可能用到React API），可修改ESLint配置文件（如.eslintrc.js或.eslintrc.json）：

  1. 确保安装最新版eslint-plugin-react：

     npm install eslint-plugin-react --save-dev
     

  2. 在配置中添加或修改规则：

     {
       "plugins": ["react"],
       "rules": {
         "react/jsx-uses-react": "off",
         "react/react-in-jsx-scope": "off"
       },
       "settings": {
         "react": {
           "version": "detect"
         }
       }
     }
     

  保存配置后重启编辑器，提示即可消失。

• 临时忽略单个文件的提示
  若只想临时屏蔽当前文件的提示，可在import语句上方添加注释：

  // eslint-disable-next-line no-unused-vars
  import React from 'react'
  

  或在文件顶部添加注释关闭整个文件的对应规则：

  /* eslint-disable react/react-in-jsx-scope */
  

内容的提问来源于stack exchange，提问作者eleven5