React项目中使用searchBox组件却报‘定义未使用’错误求助

问题根源在于React的组件命名规则：自定义组件必须以大写字母开头，小写开头的标签会被React解析为原生HTML元素，而非你导入的自定义组件。你代码里的<searchBox/>被识别成了原生HTML标签，而非导入的searchBox组件，因此ESLint判定你导入的变量未被使用。

解决步骤 #

• 修改导入语句，将组件名改为大写开头：import SearchBox from './components/searchBox';
• 在JSX中使用大写开头的组件标签：<SearchBox/>

修改后的完整代码 #

import CardList from './components/CardList';
import SearchBox from './components/searchBox';
import { robots } from './components/robots';

function App() {
  return (
    <>
      <h1>RoboFriends</h1>
      <SearchBox/>
      <CardList robots={robots}/>
    </>
  );
}

export default App;

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