React：如何在页面中两次渲染组件？

Posted 2023-02-22

【中文标题】React：如何在页面中两次渲染组件？

【英文标题】：React: How to render a component twice in a page?

【发布时间】：2018-01-26 05:38:50

【问题描述】：

我在 ReactmyComponent.js 中有一个组件构建

ReactDOM.render(
  <MyComponent />,
  document.getElementById('my-id')
);

在我的 html 中，我想渲染两次，HTML 如下：

<div id='my-id></div>
some html
<div id='my-id></div>

我想在这个页面中反应渲染两次，但它只为第二个 div 渲染一次。反正有没有渲染两次？

【参考方案1】：

另一种选择是使用class 来定义要渲染的元素：

<div id="my-id-one" class="render-here"></div>
some html
<div id="my-id-two" class="render-here"></div>

然后在js:

let elements = document.getElementsByClassName('render-here');
elements.map(element => ReactDOM.render(
  <MyComponent />,
  element
));

【参考方案2】：

你可以的

ReactDOM.render(
     <div>
       <MyComponent />
       <MyComponent />
     </div>, document.getElementById('my-id') );

或者你也可以有两个div 不同id的标签

<div id='one'></div>
some html
<div id='two'></div>

然后

ReactDOM.render(
  <MyComponent />,
  document.getElementById('one')
);

ReactDOM.render(
  <MyComponent />,
  document.getElementById('two')
);

【参考方案3】：

看起来你想在 2 个不同的地方渲染它，中间有非 React 代码。为此，您需要为您的 divs 提供不同的 ID：

<div id='my-id></div>
some html
<div id='my-other-id></div>

然后将组件渲染到每个div：

ReactDOM.render(
    <MyComponent />,
    document.getElementById('my-id')
);

ReactDOM.render(
    <MyComponent />,
    document.getElementById('my-other-id')
);

【参考方案4】：

对于 HTML 中的两个或多个元素，您不能使用相同的 id。使用不同的ids

<div id='my-id-one></div>
some html
<div id='my-id-two></div>

并为每个 ID 分别调用 ReactDOM.render。

ReactDOM.render(
  <MyComponent />,
  document.getElementById('my-id-one')
);

ReactDOM.render(
  <MyComponent />,
  document.getElementById('my-id-two')
);