Can a react component have multiple areas for child content?
<p>Let's say I have a simple react component:</p>

<pre><code>import React from 'react';
import styles from "./index.css";

export default React.createClass({
  render: function() {
    return (
      &lt;header className={styles.root}&gt;
        // area for child content
        {this.props.children}
      &lt;/header&gt;
    );
  }
});
</code></pre>

<p>Now let's say that instead of one area for any child components, I'd want two, like so:</p>

<pre><code>import React from 'react';
import styles from "./index.css";

export default React.createClass({
  render: function() {
    return (
      &lt;header className={styles.root}&gt;
        &lt;div className={styles.logo}&gt;
          // logo children here
        &lt;/div&gt;
        &lt;div&gt;
          // navigation children here
        &lt;/div&gt;
      &lt;/header&gt;
    );
  }
});
</code></pre>

<p>I know that I could use attributes, but that wouldn't be very elegant for a large chunk of html content. How can this be done in react in a way that's similar to, for example, the <a href="https://paularmstrong.github.io/swig/docs/#inheritance" rel="noreferrer">named blocks</a> in swig?</p>

<hr>

<p>Example of named blocks:</p>

<pre><code>{% extends 'layout.html' %}

{% block title %}My Page{% endblock %}

{% block head %}
  {% parent %}
  &lt;link rel="stylesheet" href="custom.css"&gt;
{% endblock %}

{% block content %}
&lt;p&gt;This is just an awesome page.&lt;/p&gt;
{% endblock %}
</code></pre>

<p>You see that these blocks can be used by referring to their name, and thus allow to 'yield' multiple areas of content. I'm hoping that there is a similarly elegant way in react to do this, as it makes components very composable.</p>