Charonyu's Profile

複合元件（Compound Component）模式是 React 中一種常見的設計模式，用於創建彼此關聯的元件集合。這些元件通過共享狀態和邏輯相互依賴，常見於如下拉選單、菜單項目等元件。

以下是使用複合元件模式的一個範例：

建立 FlyOut 元件：這個元件保持狀態，並通過 FlyOutContext.Provider 將切換值傳遞給所有子元件。


const FlyOutContext = createContext();

function FlyOut(props) {
  const [open, toggle] = useState(false);

  return (
    <FlyOutContext.Provider value={{ open, toggle }}>
      {props.children}
    </FlyOutContext.Provider>
  );
}

FlyOut 元件包含一個切換按鈕和一個列表。

建立 Toggle 元件：這個元件允許用戶通過點擊來切換菜單。


function Toggle() {
  const { open, toggle } = useContext(FlyOutContext);

  return (
    <div onClick={() => toggle(!open)}>
      <Icon />
    </div>
  );
}

Toggle 是 FlyOut 的子元件。

建立 List 和 Item 元件：這些元件根據 open 的值顯示或隱藏列表項。


function List({ children }) {
  const { open } = React.useContext(FlyOutContext);
  return open && <ul>{children}</ul>;
}

function Item({ children }) {
  return <li>{children}</li>;
}

List 和 Item 也是 FlyOut 的子元件。

最後使用就可以這樣用


import React from "react";
import { FlyOut } from "./FlyOut";
export default function FlyoutMenu() {
  return (
    <FlyOut>
      <FlyOut.Toggle />
      <FlyOut.List>
        <FlyOut.Item>Edit</FlyOut.Item> <FlyOut.Item>Delete</FlyOut.Item>{" "}
      </FlyOut.List>
    </FlyOut>
  );
}

複合元件模式在構建元件庫時非常有用，經常見於像 Semantic UI 這樣的 UI 庫。這種模式的優點是元件自我管理內部狀態，並在多個子元件間共享。實現複合元件時，我們不需要自己管理狀態。

然而，也有一些限制，例如使用 React.Children.map 提供值時，組件嵌套是有限的。只有父組件的直接子組件才能訪問 open 和 toggle 屬性，意味著我們不能將這些組件包裝在另一個組件中。此外，使用 React.cloneElement 進行元素複製時，會進行淺合併，可能導致名稱衝突。

Compound Pattern