Frontend Academy · Lezione

Componenti composti con Context

Condividere lo stato implicito tra un componente padre e i relativi figli designati usando Context, modellando API come e

Componenti composti con Context è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Cosa sono i componenti compound?

I componenti compound sono un insieme di componenti correlati, progettati per funzionare insieme come un'unica unità, come <select> e <option> in HTML. Il componente padre condivide implicitamente lo stato con i propri figli specifici.

L'obiettivo: API più pulite

Invece di <Select options={[...]} value={x} onChange={...} />, scrive <Select><Option value="a">Apple</Option></Select>. La struttura è dichiarativa e nativa di JSX.

Approccio ingenuo (problema)

Passare lo stato tramite le props obbliga chi utilizza il componente a collegare tutto manualmente. I figli non conoscono automaticamente lo stato del padre.

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

Context come connettore

Il padre crea un Context con lo stato condiviso e lo fornisce. I figli consumano il contesto, senza dover collegare esplicitamente le props.

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

I componenti figli consumano il contesto

Ogni figlio legge i dati dal contesto, senza passare props lungo l'albero.

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

Proprietà statiche per una maggiore reperibilità

Colleghi i sottocomponenti al padre, così gli utenti possono trovarli tramite il completamento automatico.

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>

Esempio reale: Disclosure

Un widget Disclosure ha i figli Trigger e Panel, che condividono tramite Context lo stato aperto/chiuso.

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

Gli hook come API pubblica

Esporti un hook personalizzato, così gli utenti possono creare i propri componenti basandosi sui suoi.

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

Componenti compound polimorfici

Permetta ai padri di eseguire il rendering di qualsiasi elemento tramite una prop as o il pattern asChild, secondo l'approccio di Radix UI. In questo modo i componenti compound possono essere combinati con JSX arbitrario.

Pattern compound headless

Le librerie headless, come Radix e Headless UI, forniscono componenti compound privi di stile: la logica di accessibilità è integrata e lei può applicare gli stili necessari.

Insidia: ispezione di React.Children

Un pattern precedente utilizzava React.Children per ispezionare i figli, ma era fragile e soggetto a rotture. Preferisca sempre Context per condividere lo stato.

Verifica rapida

In un pattern di componenti compound, come comunicano i componenti figli con il padre?

Riepilogo: componenti compound

I componenti compound permettono a parti correlate di funzionare come un'unica unità dichiarativa. Usi Context per condividere lo stato: Provider nel padre e useContext nei figli. Colleghi i sottocomponenti come proprietà statiche per renderli facilmente reperibili. Esporti un hook personalizzato come API pubblica. Radix e Headless UI sono ottimi riferimenti. Preferisca Context all'ispezione di Children.

Domande Frequenti

La lezione «Componenti composti con Context» è gratuita?

Sì — il testo completo di «Componenti composti con Context» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Componenti composti con Context»?

Condividere lo stato implicito tra un componente padre e i relativi figli designati usando Context, modellando API come e Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Componenti composti con Context»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Frontend Academy