时间戳

首页 > 解决方案 > ReactDOM 渲染到多个节点

reactjs - ReactDOM 渲染到多个节点

问题描述

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

标签： reactjsreact-dom

解决方案

可能不应该使用两个相同的 ID。但是你可以对类做同样的事情！

然后你只需要让他们使用

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

推荐阅读