ReactDOM渲染到多个节点

Question

我必须在整个页面的多个位置呈现React组件。所以我有两个具有相同ids的divs，我想在这两个地方呈现相同的React组件：

<h1>Title 1</h1>
<div id='react-component'>/<div>
.
.
.

<h1>Title 2</h1>
<div id='react-component'>/<div>

在React中，它只在一个地方呈现组件：

const node = document.querySelector('#react-component');
if (!node) {
  return null;
}
ReactDOM.render(<Component />, node);

解决这个问题最有效的方法是什么？ReactDOM可以在多个节点上呈现相同的组件吗？

Answer 1

Probably shouldn't use two same IDs.，但是你也可以对类做同样的事情！

然后您只需使用以下命令获取它们

document.querySelectorAll('.yourclass') (因为querySelector只给出了找到的项目的第一个实例)