คอมโพเนนต์แบบประกอบร่วมกับ Context

คอมโพเนนต์ประกอบคืออะไร

เป้าหมาย: อินเทอร์เฟซที่สะอาดขึ้น

แนวทางแบบง่ายเกินไป (ปัญหา)

// Without compound pattern — verbose:
<Tabs activeIndex={0} onChange={setIndex}>
  <TabList>
    <Tab index={0}>Home</Tab>
    <Tab index={1}>Profile</Tab>
  </TabList>
</Tabs>

บริบทในฐานะตัวเชื่อมต่อ

import { createContext, useContext, useState } from 'react';

const TabsContext = createContext(null);

export function Tabs({ children, defaultIndex = 0 }) {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);
  return (
    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

คอมโพเนนต์ลูกใช้บริบท

export function Tab({ index, children }) {
  const { activeIndex, setActiveIndex } = useContext(TabsContext);
  const isActive = activeIndex === index;
  return (
    <button
      className={isActive ? 'active' : ''}
      onClick={() => setActiveIndex(index)}
    >
      {children}
    </button>
  );
}

export function Panel({ index, children }) {
  const { activeIndex } = useContext(TabsContext);
  if (activeIndex !== index) return null;
  return <div className="panel">{children}</div>;
}

พร็อพเพอร์ตีแบบคงที่เพื่อให้ค้นพบได้ง่าย

Tabs.Tab = Tab;
Tabs.Panel = Panel;

// Usage:
<Tabs>
  <Tabs.Tab index={0}>Home</Tabs.Tab>
  <Tabs.Tab index={1}>Profile</Tabs.Tab>
  <Tabs.Panel index={0}>Home content</Tabs.Panel>
  <Tabs.Panel index={1}>Profile content</Tabs.Panel>
</Tabs>

ตัวอย่างจริง: การเปิดเผย

function Disclosure({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <DisclosureContext.Provider value={{ isOpen, setIsOpen }}>
      <div>{children}</div>
    </DisclosureContext.Provider>
  );
}

function Trigger({ children }) {
  const { isOpen, setIsOpen } = useContext(DisclosureContext);
  return <button onClick={() => setIsOpen(o => !o)}>{children}</button>;
}

function Panel({ children }) {
  const { isOpen } = useContext(DisclosureContext);
  return isOpen ? <div>{children}</div> : null;
}

ฮุกในฐานะอินเทอร์เฟซสาธารณะ

export function useTabs() {
  const ctx = useContext(TabsContext);
  if (!ctx) throw new Error('useTabs must be used inside <Tabs>');
  return ctx;
}

คอมโพเนนต์ประกอบแบบพหุรูป

รูปแบบคอมโพเนนต์ประกอบแบบไร้ส่วนแสดงผล

ข้อควรระวัง: การตรวจสอบคอมโพเนนต์ลูก

ตรวจสอบอย่างรวดเร็ว

ทบทวน: คอมโพเนนต์ประกอบ