React导入Navbar组件后使用未显示且报未使用变量警告问题

问题根源 #

React有个强制约定：自定义组件的名称必须以大写字母开头。你写的<navbar />会被React当成原生HTML标签处理，根本没用到你导入的navbar变量，所以控制台会弹出no-unused-vars警告，同时组件自然不会渲染。

修复步骤 #

只需要把组件名、导入名和使用时的标签统一改成大写开头即可：

修改后的navbar.js

import React from 'react'

// 组件名改为大写开头的Navbar
export default function Navbar() {
  return (
    <div> this is navbar component</div>
  )
}

修改后的app.js

// 导入时使用大写的Navbar
import Navbar from './component/Navbar';

function App() {
  return (
    <>
      <h1>hello</h1>
      {/* 使用大写的组件标签 */}
      <Navbar />
    </>
  );
}

export default App;

补充说明 #

这是React识别自定义组件的关键规则，只要遵守大写开头的命名规范，这类问题就能避免。

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