React 擁有一個強(qiáng)大的組合模型，官網(wǎng)建議使用組合而不是繼承以實現(xiàn)代碼的重用。

一. 包含

一些組件在設(shè)計前無法獲知自己要什么子組件，尤其在Sidebar和Dialog等通用"容器"中比較常見。
對于這種組件使用特別的children props來直接傳遞子元素到他們的輸出中：

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

這時其他組件就可以通過嵌套JSX傳遞任意子組件：

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

有時候也可以使用占位符而不是children。

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 />
      } />
  );