Reactjs React-类声明但从未使用，但已使用

在这里，我的IDE抱怨说searchBar被声明但从未使用过。但是，我在模板类中使用它。另外，当我运行react应用程序时，我看不到searchBar类中的文本。这是怎么回事

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './header'
import Footer from './footer'

class searchBar extends React.Component {
 render() {
   return (
     <div>
       <p>search bar here</p>
     </div>
   )
 }
}


class Layout extends React.Component {
 render() {
   return (
     <div>
       <Header />
       <searchBar />
       <Footer />
     </div >
   )
 }
}

ReactDOM.render(
 <Layout />,
 document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从“./头”导入头
从“./Footer”导入页脚
类searchBar扩展了React.Component{
render（）{
返回(
搜索栏在这里

)
}
}
类布局扩展了React.Component{
render（）{
返回(
)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

组件必须以大写字母开头。因此，您的

类搜索栏扩展了React.Component{

必须成为

类搜索栏扩展了React.Component{

，并且您必须这样呈现它：

<SearchBar />

IIRC，

searchBar

应该以大写S开头。我认为react以这种方式区分原生DOM元素和组件。很高兴知道，谢谢！