Render React nested components
<p>Is there a way to render the children of a React component under different divs?</p>

<pre><code>&lt;Page&gt;
   &lt;Header&gt; ... &lt;/Header&gt;
   &lt;Content&gt; ... &lt;/Content&gt;
   &lt;Actions&gt; ... &lt;/Actions&gt;
&lt;/Page&gt;

&lt;div class="page"&gt;
   &lt;div class="header-wrapper&gt;
      &lt;div class="header"&gt; ... &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="content-wrapper"&gt;
      &lt;div class="content"&gt; ... &lt;/div&gt;
      &lt;div class="actions"&gt; ... &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here I need the wrappers because the header is laid out differently from the area where content and actions are.</p>

<p>The obvious solution may be to introduce a Body component, but is there a more elegant way to abstract the concrete div tree which is needed to represent a certain layout from the logical components (Header, Content, Actions) which the Page declares.</p>

<p>Another solution which works is to pass the Header, Content, and Actions as properties as suggested in the React documentation:</p>

<pre><code>&lt;Page
   header={
      &lt;Header&gt; ... &lt;/Header&gt;
   }
   content={
      &lt;Content&gt; ... &lt;/Content&gt;
   }
   actions={
      &lt;Actions&gt; ... &lt;/Actions&gt;
   }
/&gt;
</code></pre>

<p>Thanks,
George</p>