Czy mogę transkludować dzieci oryginalnego elementu w ReactJS?

Question

Jeśli mam następujący kod HTML:

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

I zainicjować ReactJS komponent do #myreactcomponent div, mogę jakoś uczynić H1 i element P wewnątrz komponentu? Coś w tym stylu:

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

Czy istnieje opcja do tego w ReactJS?

Możesz sprawdzić to JSFiddle, aby zobaczyć demonstrację mojego problemu.

Dla osób znających Kątowymi: szukam opcję transclude i <ng-transclude/> tag w angularjs dyrektywy w React.

Dla osób znających Polymer: szukam równowartość tag w React <content/>.

UPDATE

Próbowałem właściwość this.props.children, ale o ile rozumiem, to działa tylko wtedy, gdy początkowy HTML jest już w komponencie zareagować. Naprawdę muszę renderować elementy potomne elementu, który początkowo renderowania pierwszy składnik React.

UPDATE 2

Aby przesunąć HTML, do inicjowania elementu (jak pokazano na update of the JSFiddle) nie jest rozwiązaniem w moim przypadku, ze względu na różne systemy, które powodują początkowego HTML i wchodzą w reakcję składniki .

Answer 1

Coś takiego .. .

.. 
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>' 

Czy to, co masz na myśli ... Możesz przeczytać więcej o tym here.

Answer 2

Tak, aby to zrobić, użyj this.props.children.

Na przykład, jeśli miał komponent React używane tak:

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

można przenosić elementy podrzędne h1 i p, robiąc to w render z MyReactComponent:

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

Answer 3

Tak, to jest możliwe.

W klasie reagować masz this.props.children

więc w składnik nadrzędny:

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

Następnie w składniku dziecięcej

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

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