我创建了一个MainPage文件夹，并在其中创建了一个Main.js文件.我想用这个在我的页面上显示某些内容.即使我在App.js文件中调用Main.js，内容也不会出现.我try 了几种解决方案，但都不起作用.我try 在HTML部分中使用"root"id创建一个dis，但我不完全确定将它放置在哪里.
这是Main.js
import React from 'react';
import './Main.css';
export default function Main()
{
return
(
<body>
<div id='root'>
<header className="header">
<div className="top-bar">
<div className="top-bar__content">
<section className="phone">
<i className="fa-solid fa-phone icon"></i>
<span></span>
</section>
<section className="email">
<i className="fa-solid fa-envelope icon"></i>
<span></span>
</section>
</div>
</div>
<div className="bottom-bar">
<div className="bottom-bar__content">
<a href="#" className="logo">
<img className="logo__img" src="pictures/logo.svg" alt="logo" />
<span className="logo__text"></span>
</a>
<nav className="nav">
<ul className="nav__list">
<li className="nav__item">
<a className="nav__link" href="#"></a>
</li>
<li className="nav__item">
<a className="nav__link" href="#"></a>
</li>
<li className="nav__item">
<a className="nav__link" href="#"></a>
</li>
<li className="nav__item">
<a className="btn" href="#"></a>
</li>
</ul>
</nav>
<div className="hamburger">
<div className="bar"></div>
<div className="bar"></div>
<div className="bar"></div>
</div>
</div>
</div>
</header>
</div>
</body>
);
}
的App.js
import React from 'react';
import Main from './MainPage/Main';
function App() {
return (
<div className="App">
<Main />
</div>
);
}
export default App;
和index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);