ReactJS + TypeScript组件导入异常：声明的header未被读取

问题原因 #

你遇到的问题核心是React的组件命名规范：自定义组件必须以大写字母开头。你代码里写的<header />是HTML原生的<header>标签，并非你导入的自定义组件，导致导入的header变量完全没被用到，因此触发了这个警告。

解决方案 #

有两种直接的修复方式：

方式一：统一组件名大写（推荐） #

修改导入语句的组件名为大写，同时确保你的header.tsx文件里的组件也用大写命名并默认导出：

// App.tsx
import Header from "./components/header.tsx";

function App() {
  return (
      <Header />
  );
}

export default App;

对应的header.tsx文件示例：

// components/header.tsx
function Header() {
  return <div>这是头部组件内容</div>;
}

export default Header;

方式二：导入时重命名组件 #

如果不想修改组件文件内的命名，可以在导入时把默认导出重命名为大写：

import { default as Header } from "./components/header.tsx";

function App() {
  return (
      <Header />
  );
}

export default App;

额外说明 #

React通过组件名的大小写区分原生HTML标签和自定义组件，这是官方明确的规范，遵守它不仅能避免这类混淆问题，还能提升代码的可读性和一致性。

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