Can I transclude the children of the original element in ReactJS?
<p>If I have the following HTML:</p>

<pre><code>&lt;div id="myreactcomponent"&gt;
  &lt;h1&gt;Headline&lt;/h1&gt;
  &lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
</code></pre>

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

<pre><code>return (
  &lt;Header&gt;&lt;/Header&gt;
  { place h1 and p here }
  &lt;Footer&gt;&lt;/Footer&gt;
);
</code></pre>

<p>Is there an option for that in ReactJS?</p>

<p><strong>You can check this <a href="https://jsfiddle.net/6hshvsco/1/" rel="nofollow">JSFiddle</a> to see a demonstration of my problem.</strong></p>

<p><em>For people familiar with <strong>Angular</strong>: I search the transclude option and the <code>&lt;ng-transclude/&gt;</code> tag of an AngularJS directive in React.</em></p>

<p><em>For people familiar with <strong>Polymer</strong>: I search the equivalent of the <code>&lt;content/&gt;</code> tag in React.</em></p>

<p><strong>UPDATE</strong></p>

<p>I tried the <code>this.props.children</code> 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.</p>

<p><strong>UPDATE 2</strong></p>

<p>To move the HTML into the initialization of the component (as shown in the <a href="https://jsfiddle.net/6hshvsco/3/" rel="nofollow">update of the JSFiddle</a>) is not an option in my case, due to different systems which render the initial HTML and the React components.</p>