title: Can a react component have multiple areas for child content?
body: <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>