反应：如何在页面中渲染组件两次？ [英] React: How to render a component twice in a page?

问题描述

我在React myComponent.js

  ReactDOM.render（
< MyComponent /> ;, 
 document.getElementById（'my-id'）
）; 
  

在我的Html中，我想渲染它两次，HTML如下所示：

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

我想在此页面中呈现两次呈现，但它仅为第二个div呈现一次。无论如何要渲染它两次？

你不能有相同的 id 用于HTML中的两个或更多元素。使用不同的 id s

 < div id ='my-id - 酮GT;< / DIV> 
 some html 
< div id ='my-id-two>< / div> 
  

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

  ReactDOM.render（
 ，
 document.getElementById 'my-id-one'）
）; 
 
 ReactDOM.render（
< MyComponent /> ;, 
 document.getElementById（'my-id-two'）
）; 
  

I have a component build in ReactmyComponent.js

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

In my Html, I want to render it twice, the HTML is as following:

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

I want react render twice in this page, but it only render once for the second div. Is there anyway to render it twice?

解决方案

You can't have the same id for two or more elements in HTML. Use different ids

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

and call the ReactDOM.render separately for each id.

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

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

这篇关于反应：如何在页面中渲染组件两次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！