我创建了一个 MainPage 文件夹，在其中创建了一个 Main.js 文件。我想用这个在我的页面上显示某些内容。即使我在App.js文件中调用Main.js，内容也不会出现。我尝试了几种解决方案，但没有一个有效。我尝试在 HTML 部分中使用“root”id 创建一个 div，但我不完全确定将其放置在哪里。
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>
);
}
import React from 'react';
import Main from './MainPage/Main';
function App() {
return (
<div className="App">
<Main />
</div>
);
}
export default App;
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>
);
您的 index.html 文件应该是带有
rootindex.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="pragma" content="no-cache">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>