React 有十分强大的组合模式。我们推荐使用组合而非继承来实现组件间的代码重用
1、组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中

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

组件的属性可以是组件,可以将任何东西作为 props 进行传递

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