ReactDOM渲染到多个节点

Question

我必须在页面的多个位置上渲染React组件。所以我有两个divs和相同的ids，并且我想在两个地方渲染相同的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只为您提供找到的项的第一个实例）