VS Code提示已导入的navBar组件未使用且页面不渲染如何处理

问题根因 #

React框架规定自定义组件的名称必须首字母大写，小写开头的标签会被React识别为原生HTML内置标签，不会对应到你导入的自定义组件，所以才会出现组件未渲染、IDE提示导入组件未使用的问题。

修复步骤 #

• 修改组件导入时的变量名，把navBar改为首字母大写的NavBar
• 修改JSX中调用组件的标签，同步改为<NavBar />
• 建议同步将navBar_component.js文件中定义的组件导出名称也调整为首字母大写格式，避免后续其他场景导入出现同类问题

修复后完整代码 #

import './App.css';
import NavBar from './components/navBar_component';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';


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

export default App;

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