React拥有强大的组合模式，推荐使用组合而非继承来实现组件的代码复用。本章节也是以理解为主，重意不重力。

包含关系

有些组件无法提前知晓它们子组件的具体内容。比如侧边栏、对话框等这类展示性的通用容器组件中特别容易遇到这种情况。这时，在构建组件时就可以利用props参数的一个特殊属性“children”，children属性就是将调用该组件实例所包含的JSX内容。如此，即可更加灵活。

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="red">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        反清复明
      </p>
    </FancyBorder>
  );
}

ReactDOM.render(
  <WelcomeDialog />,
  document.getElementById('root')
);

运行一下

少数情况下，需要同时包含不只一段JSX；这类情况可以不使用children属性，而是自行约定：将所需内容传入props，并使用相应的属性参数。示例如下：

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

运行一下