如何在 reactjs 的不同占位符中呈现不同的组件?
How to render different components in different placeholders in reactjs?
所以过去一周我一直在学习 reactjs,但我遇到了一个问题:我想制作一个网站并创建一个页眉组件(只是一个 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>
我想在页眉标签中渲染页眉组件,同时我想在页脚标签中渲染页脚组件
这是我尝试过的:
ReactDOM.render(<Header />, document.getElementById("header"));
ReactDOM.render(<Footer />, document.getElementById("footer"));
但它给我一个 错误:目标容器不是 DOM 元素。
所以我想反应不允许这种多重渲染,那么解决方案是什么?
您应该将页眉和页脚元素放在正文元素中:
<body>
<header id="header"></header>
<div id="root"></div>
<footer id="footer"></footer>
<script src="../src/index.js" type="text/jsx"></script>
</body>
你可以简单地做:
index.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
);
所以过去一周我一直在学习 reactjs,但我遇到了一个问题:我想制作一个网站并创建一个页眉组件(只是一个 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>
我想在页眉标签中渲染页眉组件,同时我想在页脚标签中渲染页脚组件
这是我尝试过的:
ReactDOM.render(<Header />, document.getElementById("header"));
ReactDOM.render(<Footer />, document.getElementById("footer"));
但它给我一个 错误:目标容器不是 DOM 元素。 所以我想反应不允许这种多重渲染,那么解决方案是什么?
您应该将页眉和页脚元素放在正文元素中:
<body>
<header id="header"></header>
<div id="root"></div>
<footer id="footer"></footer>
<script src="../src/index.js" type="text/jsx"></script>
</body>
你可以简单地做:
index.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
);