如何在 reactjs 的不同占位符中渲染不同的組件？
[英]How to render different components in different placeholders in reactjs?
問題描述
所以我過去一周一直在學習 reactjs 並且我遇到了一個問題：我想制作一個網站並創建了一個 header 組件（只是一個 div 組件）和一個頁腳組件（也是 div），我不知道如何渲染它們都在不同的占位符中：
<header id="header"></header>
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/jsx"></script>
</body>
<footer id="footer"></footer>
我想在 header 標記中呈現 header 組件，同時我想在頁腳標記中呈現頁腳組件
這是我嘗試過的：
ReactDOM.render(<Header />, document.getElementById("header"));
ReactDOM.render(<Footer />, document.getElementById("footer"));
但它給了我一個錯誤：目標容器不是 DOM 元素。 所以我猜反應不允許這種多重渲染，那么解決方案是什么？
2 個解決方案
解決方案1
0 已采納 2021-05-14 02:04:36
你可以簡單地做：
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
import { StrictMode } from "react";
import ReactDOM from "react-dom";
function App() {
return (
<div className="App">
<header>Header</header>
<footer>Fotter</footer>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);
解決方案2
-1 2021-05-14 01:28:38
您應該將 header 和頁腳元素放在正文元素內：
<body>
<header id="header"></header>
<div id="root"></div>
<footer id="footer"></footer>
<script src="../src/index.js" type="text/jsx"></script>
</body>
使用 ReactJS，如何使用 Route 顯示不同的組件？
[英]Using ReactJS, how can I use Route to display different components?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.