反应中化合物组件的高级图案：用上下文和克隆构建灵活的UI

<code class="javascript">import React, { createContext, useState } from 'react';

const TabsContext = createContext();

const Tabs = ({ children, defaultIndex = 0 }) => {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);

  return (
    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
};</code>

<code class="javascript">const TabList = ({ children }) => <div className="tab-list">{children}</div>;

const Tab = ({ index, children }) => {
  const { activeIndex, setActiveIndex } = React.useContext(TabsContext);

  return (
    <button className={activeIndex === index ? 'active' : ''} onClick={() => setActiveIndex(index)}>
      {children}
    </button>
  );
};</code>

<code class="javascript">const TabPanel = ({ index, children }) => {
  const { activeIndex } = React.useContext(TabsContext);

  return activeIndex === index ? <div className="tab-panel">{children}</div> : null;
};</code>

<code class="jsx"><Tabs defaultIndex={0}>
  <TabList>
    <Tab index={0}>Tab 1</Tab>
    <Tab index={1}>Tab 2</Tab>
    <Tab index={2}>Tab 3</Tab>
  </TabList>
  <TabPanel index={0}>Content for Tab 1</TabPanel>
  <TabPanel index={1}>Content for Tab 2</TabPanel>
  <TabPanel index={2}>Content for Tab 3</TabPanel>
</Tabs></code>

<code class="javascript">const AccordionContext = createContext();

const Accordion = ({ children }) => {
  const [openIndex, setOpenIndex] = useState(null);

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

<code class="javascript">const AccordionItem = ({ index, children }) => {
  const { openIndex, setOpenIndex } = React.useContext(AccordionContext);

  return React.Children.map(children, (child) =>
    React.cloneElement(child, {
      isOpen: index === openIndex,
      onClick: () => setOpenIndex(index === openIndex ? null : index),
    })
  );
};</code>

<code class="javascript">const AccordionHeader = ({ children, isOpen, onClick }) => (
  <button className={isOpen ? 'active' : ''} onClick={onClick}>
    {children}
  </button>
);

const AccordionContent = ({ children, isOpen }) => (
  <div className={`accordion-content ${isOpen ? 'open' : ''}`}>
    {isOpen && children}
  </div>
);</code>

<code class="jsx"><Accordion>
  <AccordionItem index={0}>
    <AccordionHeader>Header 1</AccordionHeader>
    <AccordionContent>Content for Item 1</AccordionContent>
  </AccordionItem>
  <AccordionItem index={1}>
    <AccordionHeader>Header 2</AccordionHeader>
    <AccordionContent>Content for Item 2</AccordionContent>
  </AccordionItem>
</Accordion></code>