反應：如何在頁面中渲染組件兩次？

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 
));