React导入组件后仍提示unused import报错的原因咨询

AI 小北

2026-8-30

问题根因

这个问题是违反React JSX基础语法规则导致的：所有自定义React组件必须以大写英文字母开头命名，使用时也必须写大写开头的标签。小写开头的JSX标签会被编译器直接识别为原生HTML内置标签，不会和你导入的组件变量做关联。
你的代码里两处违反了这个规则：

定义函数组件时用了小写开头的home作为组件名
渲染组件时写了小写的<home/>标签

报错逻辑说明

JSX语法会被编译为React.createElement调用，当你写小写标签<home/>时，编译结果等价于：

React.createElement("home", null)

第一个参数是字符串类型，代表要渲染原生DOM节点，但HTML规范里根本不存在<home>这个内置标签，既不会正常渲染你写的组件内容，也导致你导入的home组件变量从头到尾没有被实际引用，所以会触发「unused import」的提示。

修复方案

把组件相关的命名统一改成大写开头即可：

调整Home组件的定义代码

// 组件名改为大写开头的Home
const Home = () => {
  return (
    <div className="myname">
      <h1>This is heading 1</h1>
    </div>
  );
}
export default Home;

调整App组件里的导入和使用代码

import './App.css';
// 导入名对应改为大写Home
import Home from './Component/Home/home.js';
function App() {
  return (
    <div className="App">
      {/* 使用大写开头的组件标签 */}
      <Home/>
      <h2>This is h2 file</h2>
    </div>
  );
}
export default App;