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

Вероятно, не следует использовать два одинаковых идентификатора. Но вы можете сделать то же самое с классами!

Тогда вам просто нужно получить их, используя

document.querySelectorAll('.yourclass') (поскольку querySelector дает вам только первый экземпляр найденного элемента)