Reagieren: Wie man eine Komponente zweimal auf einer Seite rendert?

Question

ich eine Komponente Build in React myComponent.js

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

In meinem Html, ich will es zweimal machen, die HTML ist wie folgt:

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

ich reagieren soll zweimal in dieser Seite machen, aber es rendern nur einmal für das zweite div. Gibt es das überhaupt, um es zweimal zu rendern?

Answer 1

Sie können nicht die gleiche id für zwei haben oder mehr Elemente in HTML. Verwenden Sie unterschiedliche id s

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

und rufen Sie die ReactDOM.render separat für jede ID.

Answer 2

könnten Sie tun

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

Oder Sie könnten auch zwei div Tags mit verschiedenen ID haben

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

dann

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

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

Answer 3

Es sieht so aus, als ob Sie es an 2 verschiedenen Orten rendern möchten, mit nicht reaktivem Code dazwischen. Um das zu tun, wollen Sie Ihre div s unterschiedliche IDs geben:

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

machen dann die Komponente jeden div:

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

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

Answer 4

Eine weitere Option ist ein class zu verwenden, um Elemente zu definieren zu machen in:

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

Dann in js:

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