如何在 reactjs 的不同占位符中渲染不同的组件？

Question

所以我过去一周一直在学习 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 元素。 所以我猜反应不允许这种多重渲染，那么解决方案是什么？

Answer 1

你可以简单地做：

索引.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
);

Answer 2

您应该将 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 的不同占位符中渲染不同的组件？

问题描述

2 个解决方案

解决方案1
0 已采纳 2021-05-14 02:04:36

解决方案2
-1 2021-05-14 01:28:38

如何在 reactjs 的不同占位符中渲染不同的组件？

问题描述

2 个解决方案

解决方案1 0 已采纳 2021-05-14 02:04:36

解决方案2 -1 2021-05-14 01:28:38

解决方案1
0 已采纳 2021-05-14 02:04:36

解决方案2
-1 2021-05-14 01:28:38