React组件引入报错：'header已声明但未使用'问题求助

问题根源 #

你碰到的'header' is declared but its value is never read.ts(6133)报错，本质是React的组件命名规则：自定义组件必须以大写字母开头。小写的header会被React判定为原生HTML标签，而非你写的自定义组件，导致导入的header变量没被真正使用，触发TS警告，同时组件也不会正常渲染。

修改后的代码 #

1. 调整header.jsx组件命名

把组件函数名改成大写，保持导出一致：

function Header() {
    return (  
<div className='header'>
</div>
    );
}
export default Header;

2. 调整App.jsx的导入与渲染

导入时使用大写的组件名，渲染时也用大写标签：

import './App.css'
import Header from './header.jsx';
function App() {
  return (
    <div className="App">
      <Header/>
    </div>
  )
}
export default App

这样修改后，TS的未读变量警告会消失，自定义Header组件也能正常渲染，完成两个文件的关联。

内容的提问来源于stack exchange，提问作者same seçr