react：組件之間的組合

背景

react 推薦使用組合而非繼承來實現組件間的代碼重用。
不推薦組件的繼承

其實組合就是父子傳值

例一

使用一個特殊的 children prop 來將他們的子組件傳遞到渲染結果中：

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

// 組件中間的這部分傳給了上面的 props.children
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，並使用相應的 prop。

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

<Contacts /> 和 <Chat /> 之類的 React 元素本質就是對象（object），所以你可以把它們當作 props，像其他數據一樣傳遞。這種方法可能使你想起別的庫中“槽”（slot）的概念，但在 React 中沒有“槽”這一概念的限制，你可以將任何東西作爲 props 進行傳遞。