反应组件可以有多个儿童内容区域吗？

Question

假设我有一个简单的反应组件:

import React from 'react';
import styles from "./index.css";

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

现在让我们说代替任何子组件的一个区域,我想要两个,就像这样:

import React from 'react';
import styles from "./index.css";

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

我知道我可以使用属性,但对于大量的html内容来说,这不是很优雅.如何通过类似于例如swig中的命名块的方式做出反应？

---

命名块的示例:

{% extends 'layout.html' %}

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

{% block head %}
  {% parent %}
  <link rel="stylesheet" href="custom.css">
{% endblock %}

{% block content %}
<p>This is just an awesome page.</p>
{% endblock %}

您可以看到这些块可以通过引用它们的名称来使用,从而允许"产生"多个内容区域.我希望有一个同样优雅的方式来做这个,因为它使组件非常可组合.

Answer 1

import React, { Component } from 'react';
import styles from "./index.css";
import Logo from "./components/Logo";
import Navbar from "./components/Logo";

class Comp extends Component {
    render(){
        return (
            <Header className={styles.root}
                top={Logo}
                right={Navbar}
                />
        );
    }
}

class  Header extends Component {
    render(){
        let {top,right} =this.props;
        return (
            <header className={styles.root}>
                <div className={styles.logo}>
                    {top && <top />}
                </div>
                <div>
                    {right && <right />}
                </div>
            </header>
        );
    }
}

Answer 2

Make seperate components Donot use props to pass components as children.
something like this.

//header.js

import React from 'react';
import styles from "./index.css";

export default React.createClass({
  getComponent(key) {
     return this.props.children.filter( (comp) => {
             return comp.key === key;
     });
  }
  render: function() {
    return (
      <header className={styles.root}>
        <div className={styles.logo}>
          {this.getComponent('logo')}
        </div>
        <div>
         {this.getComponent('navbar'}

        </div>
      </header>
    );
  }
});

//app.js

export default React.createClass({
      render: function() {
        return (
          <Header>
            <Logo key="logo"/>
            <Navbar key="navbar"/>
          </Header>
        );
      }
    });