Compound Components

• گروهی از کامپوننت‌ها که با هم کار می‌کنند تا یک رابط کاربری پیچیده را بسازند

• استیت ها (state) و رفتار را بین کامپوننت‌های فرزند به اشتراک می‌گذارند

• و API انعطاف‌پذیر و خوانا ارائه می‌دهند

// Accordion.js - Compound Component Pattern
import React, { createContext, useContext, useState } from "react";

const AccordionContext = createContext();

export function Accordion({ children, defaultOpen = []
 }) {
  const [openItems, setOpenItems]
 = useState(defaultOpen);

  const toggleItem = id => {
    setOpenItems(prev =>
      prev.includes(id) ? prev.filter(itemId => itemId !== id) : [...prev, id]
,
    );
  };

  const isOpen = id => openItems.includes(id);

  return (
    <AccordionContext.Provider value={{ toggleItem, isOpen }}>
      <div className="accordion">{children}</div>
    </AccordionContext.Provider>
  );
}

Accordion.Item = function AccordionItem({ id, children }) {
  const { isOpen } = useContext(AccordionContext);
  return (
    <div className={`accordion-item ${isOpen(id) ? "open" : ""}`}>
      {children}
    </div>
  );
};

Accordion.Trigger = function AccordionTrigger({ id, children }) {
  const { toggleItem } = useContext(AccordionContext);
  return (
    <button className="accordion-trigger" onClick={() => toggleItem(id)}>
      {children}
    </button>
  );
};

Accordion.Content = function AccordionContent({ id, children }) {
  const { isOpen } = useContext(AccordionContext);

  if (!isOpen(id)) return null;

  return <div className="accordion-content">{children}</div>;
};

// استفاده:
function App() {
  return (
    <Accordion defaultOpen={["item1"]
}>
      <Accordion.Item id="item1">
        <Accordion.Trigger id="item1">Section 1</Accordion.Trigger>
        <Accordion.Content id="item1">Content for section 1</Accordion.Content>
      </Accordion.Item>

      <Accordion.Item id="item2">
        <Accordion.Trigger id="item2">Section 2</Accordion.Trigger>
        <Accordion.Content id="item2">Content for section 2</Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

جمع بندی

الگوهای طراحی در فرانت‌اند تنها مجموعه‌ای از بهترین‌ها نیستند، بلکه روشی سیستماتیک برای حل مسائل معمول هستند. انتخاب الگوی مناسب به اندازه پروژه، تیم و نیازهای کسب‌وکار بستگی دارد. مهم‌ترین نکته حفظ ثبات در پروژه و تطبیق الگوها با شرایط خاص هر پروژه است.

نکته طلایی: بهترین الگو، الگویی است که تیم شما آن را درک کند، نگهداری آن آسان باشد و نیازهای پروژه شما را برآورده سازد