React在.tsx文件中导入未被读取的问题排查及必要性咨询

核心原因 #

React 17及以后版本推出了新的JSX转换机制，配合你tsconfig里的"jsx": "react-jsx"配置，TSX/JSX文件已经不需要手动导入React了。

旧版JSX转换会把<div />这类代码编译成React.createElement('div')，所以必须导入React才能让代码运行；而新转换会直接使用React内部的_jsx、_jsxs等函数，编译器会自动帮你注入这些依赖，不需要显式写import React from 'react'，手动导入反而会因为变量没被使用触发ESLint警告。

你的配置验证 #

• 从package.json可以看到，你使用的React版本是17.0.2，完全支持新JSX转换。
• tsconfig.json里compilerOptions的jsx字段已经设置为react-jsx，这正是启用新转换的正确配置。

解决办法 #

1. 删除无用导入：直接删掉TSX文件里的import React from 'react'，代码依然能正常构建运行，警告也会消失。
2. 按需导入API：如果需要使用React的内置API（比如useState、useEffect、Fragment），改成按需导入的方式，比如：

   import { useState, Fragment } from 'react'
   

   这样既用到了导入的变量，也不会触发未使用的警告。

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