ReactDOM渲染到多个节点

Posted 2021-04-12

我必须在页面的多个位置上渲染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是否可以在多个节点上渲染相同的组件？

答案

Probably shouldn't use two same IDs.但您可以对类进行相同的操作！

然后您只需使用]

document.querySelectorAll('.yourclass') （由于querySelector只给您所找到项目的第一个实例）