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

【问题标题】：How to render different components in different placeholders in reactjs?reactjs中如何在不同的占位符中渲染不同的组件？
【发布时间】：2021-08-04 05:58:08
【问题描述】：

所以过去一周我一直在学习 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>

我想在header标签中渲染header组件，同时我想在footer标签中渲染footer组件

这是我尝试过的：

ReactDOM.render(<Header />, document.getElementById("header"));
ReactDOM.render(<Footer />, document.getElementById("footer"));

但它给了我一个 错误：目标容器不是 DOM 元素。 所以我猜反应不允许这种多重渲染，那么解决方案是什么？

【问题讨论】：

将<script/>标签放在页脚下方
你为什么需要那个？
@Jayce444 试过了，效果不错，它只给出了我想要渲染的第一个元素
@ViniciusKatata 一个网站通常由三个部分组成，页眉、正文和页脚，这就是为什么我想在一个组件中制作每个部分，当我想渲染它时，它不起作用
嗯，您可能会将header 标签与head 混淆，不是吗？

标签： javascript reactjs dom components rendering

【解决方案1】：

你应该将页眉和页脚元素放在正文元素中：

<body>
    <header id="header"></header>
    <div id="root"></div>
    <footer id="footer"></footer>
    <script src="../src/index.js" type="text/jsx"></script>
</body>

【讨论】：

【解决方案2】：

你可以这样做：

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
);

【讨论】：

您可以导入 Header 和 Footer 组件并使用它们