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

Question

我有一个组件建立阵营myComponent.js

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

在我的HTML，我想渲染它两次，HTML是如下：

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

我想反应在此页面两次渲染，但它只为第二个div渲染一次。无论如何渲染它两次？

Answer 1

你不能有相同的id两或HTML中的更多元素。使用不同的id小号

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

，并分别致电ReactDOM.render每个ID。

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

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

Answer 2

你可以做

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

，或者您也可以有不同的ID 2个div标签

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

然后

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

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

Answer 3

它看起来像你想在2个不同的地方渲染它，其间没有React代码。要做到这一点，你想给你的div期不同的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') 
); 

Answer 4

另一种选择是使用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 
));