React导入header/footer组件未生效且提示未使用，求助解决

问题中的代码 #

header.js #

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

footer.js #

function footer(){
    return(<div className="footer"><footer>copyright 2022-23</footer></div>)
}
export default footer;

App.js #

import React from 'react';
import header from './header';
import footer from './footer';

function App() {
  return (
    <div>
      <div><header/></div>
      <div><footer/></div>
    </div>
  );
}

export default App;

原因分析 #

React有个硬性规则：自定义组件名称必须以大写字母开头。

你写的<header/>和<footer/>会被React当成原生HTML标签处理，而非你导入的自定义组件。这直接导致两个问题：

• 导入的header、footer变量完全没被用到，所以编辑器提示“变量未使用”
• 页面渲染的是空白的原生HTML标签，不是你自定义组件里的内容，自然看不到预期输出

解决方法 #

只需要把组件定义和导入后的名称改成大写开头即可：

修改后的header.js #

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

修改后的footer.js #

function Footer(){
    return(<div className="footer"><footer>copyright 2022-23</footer></div>)
}
export default Footer;

修改后的App.js #

import React from 'react';
import Header from './header';
import Footer from './footer';

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

export default App;

修改完成后，React就能正确识别你的自定义组件，导入的变量会被正常调用，组件内容也能正常渲染。

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