React 推荐使用组合而非继承来实现组件之间的代码重用

包含关系

指的是一些组件无法提前知道子组件的具体内容，比如对话框等通用容器类的组件。

建议使用 children prop 来把子组件传递到渲染结果中:

function CommonDialogBox(props) {
  return (
    <div style={props.style} className={props.className}>
      {props.children}
    </div>
  );
}

这样可以通过 JSX 嵌套将任意组件作为子组件传递给它们:

function CustomDialog() {
  return (
    <CommonDialogBox
      className="dialog"
      style={{ width: "100px", height: "100px" }}
    >
      <h1>对话框</h1>
      <p>自定义内容</p>
    </CommonDialogBox>
  );
}

根据具体的使用情况，在通用容器组件中预留对应的位置，将所需内容传入 props，并且使用对应的 prop:

function Layout(props) {
  return (
    <div class="box">
      <div class="header">{props.header}</div>
      <div class="content">{props.content}</div>
      <div class="bottom">{props.bottom}</div>
    </div>
  );
}

function App() {
  return (
    <Layout header={<Header />} content={<Content />} bottom={<Bottom />} />
  );
}

类似 Vue 里面的插槽

特例关系

指的就是把通用容器 Dialog 通过特定的 props 再包装成一个特殊的实例 WelcomeDialog:

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">{props.title}</h1>
      <p className="Dialog-message">{props.message}</p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog title="Welcome" message="Thank you for visiting our spacecraft!" />
  );
}

React 核心概念：组件组合

包含关系

特例关系