使用JSX时React需在作用域报错，已导入仍无效求助

以下是几种针对性的解决方法：

• 适配React 17+版本的ESLint配置
  React 17及以上版本的JSX转换不再需要手动导入React，但旧版ESLint规则会误报。

  1. 升级eslint-plugin-react到最新版：

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

  2. 在ESLint配置文件（如.eslintrc.js）中关闭该规则：

     module.exports = {
       // ...其他配置
       rules: {
         'react/react-in-jsx-scope': 'off'
       }
     }
     

• 检查导入语句正确性
  确保使用默认导入而非命名导入：
  正确写法：import React from 'react'
  错误写法：import { React } from 'react'

• 确认文件扩展名
  确保使用.jsx或.tsx作为文件后缀，JSX语法无法在.js/.ts文件中正常解析。

• 清除缓存并重启服务

  1. 重启本地开发服务器（如执行npm start重启）
  2. 重启编辑器的ESLint服务（以VS Code为例：按Ctrl+Shift+P，输入"ESLint: Restart ESLint Server"执行）

• 检查TypeScript依赖（若使用TSX）
  确保已安装@types/react依赖：

  npm install @types/react --save-dev
  

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