Как разместить корневой div с помощью рендерера React?
Я создал папку MainPage, внутри которой создал файл Main.js. С помощью этого я хочу отображать определенное содержимое на своей странице. Несмотря на то, что я вызываю Main.js в файле App.js, содержимое не отображается. Я попробовал несколько решений, но ни одно из них не сработало. Я попытался создать раздел в разделе HTML с «корневым» идентификатором, но не совсем уверен, где его разместить.
Итак, вот 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>
);
конечно. Я отредактировал свой пост, чтобы вы могли видеть. @masteronin99
Если вы размещаете обычные теги внутри <div className = "App">, вы это видите (например: вы видите <p>Test</p>, если вы размещаете это вместо <Main />)
Да, я вижу это. @НикПарсонс
В главном компоненте присвойте корневому идентификатору другой идентификатор: <div id='root'>. Ваш index.html должен уже включать body и div с идентификатором root (это то, что вы визуализируете в index.js), поэтому я предлагаю вам попробовать удалить их (body и корень div) из Main.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Ваш файл index.html должен иметь идентификатор root.
index.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>
Как предложено в ответе @Joshua, ваш файл index.html должен содержать корневой идентификатор.
И я попытался скомпилировать ваш код в песочнице, и это изменение решило для меня проблему.
На главной странице вы написали, как показано ниже.
...
export default function Main()
{
return
(
<body>
<div id='root'>
...
Измените это, как показано ниже, это устранило проблему для меня.
...
export default function Main()
{
return (
<body>
<div id='root'>
...
Эта скобка ( кажется, мешает вашему коду. Пожалуйста, проверьте
У вас должен быть root div в вашем index.html, а не в файлах javascript.
Мы должны это сделать, потому что куда помещать HMTL div.
<html>
<head>
<title>My App</title>
<script src = "app.js"></script>
</head>
<body>
<div class = "root"></div>
</body>
</html>
function App(){
return <>
<div>Stuff</div>
</>
}
const root = createRoot(document.getElementById('root'));
root.render(<App />)
Можете ли вы показать HTML в проверке, например, что на самом деле происходит?