Posso escludere i figli dell'elemento originale in ReactJS?

Question

Se ho il seguente codice HTML:

<div id="myreactcomponent"> 
    <h1>Headline</h1> 
    <p>Content</p> 
</div> 

E io inizializzare un componente ReactJS nella #myreactcomponent div, posso in qualche modo rendere l'H1 e l'elemento p all'interno del componente? Qualcosa del genere:

return (
    <Header></Header> 
    { place h1 and p here } 
    <Footer></Footer> 
); 

Esiste un'opzione per questo in ReactJS?

È possibile controllare questo JSFiddle per vedere una dimostrazione del mio problema.

Per le persone che hanno familiarità con angolare: Cerco l'opzione transclude e la <ng-transclude/> tag di una direttiva AngularJS a reagire.

Per le persone che hanno familiarità con Polymer: Cerco l'equivalente del tag <content/> a reagire.

UPDATE

ho provato la proprietà this.props.children, ma per quanto ho capito, questo funziona solo se il codice HTML iniziale è già in un componente reagire. Ho davvero bisogno di rendere i figli dell'elemento in cui inizialmente eseguo il rendering del primo componente React.

UPDATE 2

Per spostare il codice HTML nella inizializzazione del componente (come mostrato nella update of the JSFiddle) non è un'opzione nel mio caso, a causa di diversi sistemi che rendono il HTML iniziale e il reagire componenti .

Answer 1

Qualcosa di simile .. .

.. 
render(){ 
return (
<Header></Header> 
<span dangerouslySetInnerHTML={{__html:'content'}}></span> 
<Footer></Footer> 
) 
} 
.. 
var content = '<h1>This is a header</h1><p>This is some para..</p>' 

E 'questo che ti riferisci ... Si può leggere di più su questo here.

Answer 2

Sì, per fare ciò utilizzare this.props.children.

Per esempio, se tu fossi un componente Reagire utilizzato in questo modo:

<MyReactComponent> 
    <h1>Headline</h1> 
    <p>Content</p> 
</MyReactComponent> 

È possibile trasferire gli elementi figlio h1 e p, facendo questo nel render di MyReactComponent:

return (
    <Header></Header> 
    { this.props.children } 
    <Footer></Footer> 
); 

Answer 3

Sì, questo è possibile.

Nella classe reagire voi hanno this.props.children

Così, alla componente principale:

function render() { 
    return <MyComponent><div class="my-child">My text</div></MyComponent>; 
} 

Poi nella componente figlio

function render() { 
    return <div class="child-wrapper">{this.props.children}</div>; 
} 

https://facebook.github.io/react/tips/children-props-type.html