未使用的导入，即使我在react中导入了组件

Question

我导入了名为"home"并在"div"中使用该组件标记，如

所示

import './App.css';
import home from './Component/Home/home.js';
function App() {
return (
<div className="App">
<home/>
<h2>This is h2 file</h2>
</div>
);
}
export default App;

我的home组件在这里

const home = () =>
{
return(
<div className="myname">
<h1>This is heading 1</h1>
</div>
);
}
export default home;

但是问题是无法读取该组件并返回未使用的导入。有谁能解释一下为什么会这样吗?

Answer 1

你必须用大写字母命名组件，这是必须的。

所以你需要将home组件更改为Home。

你可以这样使用它:

import './App.css';
import Home from './Component/Home/home.js';
function App() {
return (
<div className="App">
<Home/>
<h2>This is h2 file</h2>
</div>
);
}
export default App;

，这是你的home组件:

const Home = () =>
{
return(
<div className="myname">
<h1>This is heading 1</h1>
</div>
);
}
export default Home;

Answer 2

组件首字符必须为大写