Can I transclude the children of the original element in ReactJS?

Question

If I have the following HTML:

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

And I initialize a ReactJS Component into the #myreactcomponent div, can I somehow render the h1 and the p element inside the component? Something like that:

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

Is there an option for that in ReactJS?

You can check this JSFiddle to see a demonstration of my problem.

For people familiar with Angular: I search the transclude option and the <ng-transclude/> tag of an AngularJS directive in React.

For people familiar with Polymer: I search the equivalent of the <content/> tag in React.

UPDATE

I tried the this.props.children property, but as far as I understand, this only works if the initial HTML is already in an React component. I really need to render the children of the element that I initially render the first React component into.

UPDATE 2

To move the HTML into the initialization of the component (as shown in the update of the JSFiddle) is not an option in my case, due to different systems which render the initial HTML and the React components.

Answer 1

Something like this...

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

Is this what you are referring... You can read more about this here.

Answer 2

Yes, to do this use this.props.children.

For example, if you had a React component used like this:

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

You can transfer the child elements h1 and p, by doing this in the render of MyReactComponent:

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