Reactjs 组件已声明但从未使用

我一直收到这个奇怪的消息，React没有呈现我的组件。我非常确定我正在正确渲染和导入它：

容器：

import searchBar from "./searchBar";

class ItemList extends Component {

    render() {
        return (
      <searchBar/>
        );
    }
}

从“/searchBar”导入搜索栏；
类ItemList扩展组件{
render（）{
返回(
);
}
}

搜索栏

import React, { Component } from 'react';

const searchBar = () => {
    return <div>ssuhsuhuhsususu</div>;
  }
export default searchBar

import React，{Component}来自'React'；
常量搜索栏=（）=>{
返回Shuhsuhususu；
}
导出默认搜索栏

更改为

const SearchBar = () => {
  return <div>ssuhsuhuhsususu</div>;
}
export default SearchBar;

const SearchBar=（）=>{
返回Shuhsuhususu；
}
导出默认搜索栏；

如果您使用小写字母命名，则会将其视为HTML标记，例如

，

---

因此，组件应始终以大写字母开头。

如果要使用名称以小写字母开头的组件，则可以使用以下提示：

只需在使用前将其分配给大写变量即可

import searchBar from "./searchBar";
const Foo = searchBar;
<Foo/>

从“/searchBar”导入搜索栏；
const Foo=搜索栏；

完整代码：

import searchBar from "./searchBar";

const Foo = searchBar;

class ItemList extends Component {

    render() {
        return (
        <Foo/>
        );
    }
}

从“/searchBar”导入搜索栏；
const Foo=搜索栏；
类ItemList扩展组件{
render（）{
返回(
);
}
}

此外，由于您只声明一个无状态的功能组件，因此不需要导入组件。所以将import-React，{Component}从'React'更改为'React'；从“React”导入React；