我收到"'navBar' is defined but never used no-unused-vars"警告.如何解决？(反应应用程序)

Question

import './App.css';
import Search from './components/HomePage/SearchBar';
import navBar from './components/common/Header.js';
import footer from './components/common/Footer.js';
function App() {
return (
<div>
<navBar />
<h1>headd</h1> 
<footer />
</div>

)
}
export default App;

这是我的App.js元素在页面上是可见的，但不是导航栏和页脚。

这是导出navBar

的Header.js文件

export function navBar(){
return(
<div>
<div>
<ul className="navbar"> 
<li><h3>FindTheFlat</h3></li>
<li><a href="default.asp">LOGIN/SIGN-UP</a></li>

</ul>

</div>
</div>
)
}

navBar正在被导出，但即使在调用之后也没有被使用需要帮助。

Answer 1

注意:组件名称必须以大写字母开头。

React将以小写字母开头的组件视为DOM标签。例如，表示一个HTMLdiv标签，但表示一个组件，并且需要Welcome在范围内。

在这里看到更多:https://reactjs.org/docs/components-and-props.html

所以，React不使用你的用户定义组件(<navBar />,<footer />)。它使用DOM标签

Answer 2

我认为原因是您使用小写名称调用组件。

navBar，应该是Navbar.原因是React会混淆自定义组件JSX和HTML元素

供参考

当元素类型以小写字母开头时，它指的是a像or和这样的内置组件会导致字符串'div'或者'span'传递给React.createElement。以a开头的类型比如编译成React.createElement(Foo)和对应于JavaScript文件中定义或导入的组件。

我们建议用大写字母命名组件。如果你有以小写字母开头的组件，将其分配给