Kann ich meine Komponente an den vorhandenen Inhalt eines Div in ReactJS anhängen?

Question

Wenn wir ReactDOM.render(<Component/>,document.getElementById("container")); verwenden, wird die Komponente zu dem genannten Element gerendert. Was ist, wenn das div hier bereits vorhandenen Inhalt enthält? Kann React die gerenderte Komponente anhängen? z:

HTML:

<div id = "container">Hello, React!</div> 

JSX:

var Component = React.createClass({ 
      render: function(){ 
       return(
        <p>Hello to you too!</p> 
       ) 
      } 
     }) 
     ReactDOM.render(<Component/>, document.getElementById("container")); 

Answer 1

Wenn Sie machen eine Komponente in einem div reagieren, die durch die Inhalte der Komponente dessen Inhalt ersetzt werden Sie erstellt.

<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script> 
<div class = 'outer-container'> 
<p> 
I can see this hello. 
</p> 
<div id="container"> 
    <!-- This element's contents will be replaced with your component. --> 
    <p> 
     Hello React 
    </p> 
</div> 

</div> 

JSX

var Hello = React.createClass({ 
    render: function() { 
    return (
     <div className="Button"> 
     <span className="left" onClick={function() {alert("left")}}>Left</span> 
     <span className="right" onClick={function() {alert("right")}}>Right</span> 
     <span className="middle" onClick={function() {alert("middle")}}>Middle</span> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(<Hello name="World" />, document.getElementById('container')); 

Sie können eine Geige sehen hier: JSFIDDLE

Answer 2

Sie haben einige Wickelbehälter für das Zeug haben, die Sie nicht wollen, außer Kraft gesetzt werden. Es ist sollte so etwas sein:

<div id='wrapper-container'> 
    <p>Hello, React! Content before</p> 
    <div id='container'></div> 
    <p>Content after</p> 
</div> 

Answer 3

Soweit ich sagen kann, ist dies der einzige Weg, zu tun, was Sie fragen (wie ich versuchte, das Gleiche zu tun):

let divs = document.getElementsByClassName("some_class") 
for (let i = 0; i < divs.length; i++) { 
    const id = Math.random() //or some such identifier 
    const d = document.createElement("div") 
    d.id = id 
    divs[i].appendChild(d) 
    ReactDOM.render(<SomeComponent/>, document.getElementById(id)) 
} 

Wenn jemand eine sauberere/bessere Möglichkeit kennt, die react Komponente an die existierende <div> anzuhängen, ohne zuerst die neue leere <div> anzubringen, bitte klingeln!