React中出现no-unused-vars未使用组件警告的解决求助

问题根源 #

你的navBar组件命名违反了React核心规范：自定义组件必须以大写字母开头。小写开头的标签会被React解析为原生HTML元素（比如<div>、<nav>），而非你导入的自定义组件。因此即便你写了<navBar />，React并没有实际使用你导入的navBar变量，ESLint才会判定它未被使用。

修复步骤 #

1. 修改导入语句的组件名，改为大写开头：

import React from "react";
import NavBar from "./components/navBar/navBar"; // 改为大写开头的NavBar

2. 在JSX中同步使用大写组件名：

function App() {
  return (
    <>
      <div className="App">
        <NavBar /> {/* 使用大写的NavBar */}
      </div>
    </>
  );
}

3. （推荐）同步修改组件文件的导出命名，保持代码风格一致（比如在navBar.js中）：

// 原导出改为大写命名
export default function NavBar() {
  // 组件内容
}

补充说明 #

这不是ESLint配置的问题，修改ESLint规则只是掩盖警告，无法解决组件未被正确渲染的本质问题。遵循React组件命名规范是解决该问题的唯一有效方式。

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