Composants composés avec Context
Partagez un état implicite entre un composant parent et ses enfants désignés à l’aide de Context, en modélisant des API comme et .
Composants composés avec Context est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Que sont les composants composés ?
Les composants composés sont un ensemble de composants associés, conçus pour fonctionner ensemble comme une seule unité, à l’image de <select> et <option> en HTML. Le parent partage implicitement son état avec ses enfants spécifiques.
L’objectif : des API plus claires
Au lieu de <Select options={[...]} value={x} onChange={...} />, vous écrivez <Select><Option value="a">Apple</Option></Select>. La structure est déclarative et native pour JSX.
Approche naïve (problème)
Transmettre l’état par les propriétés oblige l’utilisateur du composant à tout relier. Les enfants ne connaissent pas automatiquement l’état du parent.
// Without compound pattern — verbose:
<Tabs activeIndex={0} onChange={setIndex}>
<TabList>
<Tab index={0}>Home</Tab>
<Tab index={1}>Profile</Tab>
</TabList>
</Tabs>Le contexte comme connecteur
Le parent crée un Context contenant l’état partagé et le fournit. Les enfants consomment le contexte, sans transmission explicite de propriétés.
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>
);
}Les composants enfants consomment le contexte
Chaque enfant lit les données du contexte, sans transmettre de propriétés à travers l’arbre.
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>;
}Propriétés statiques pour faciliter la découverte
Associez les sous-composants au parent afin que les utilisateurs les découvrent grâce à la complétion automatique.
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>Exemple concret : Disclosure
Un composant de divulgation possède des enfants Déclencheur et Panneau qui partagent un état ouvert/fermé via le contexte.
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;
}Les hooks comme API publique
Exportez un hook personnalisé afin que les utilisateurs puissent créer leurs propres composants à partir du vôtre.
export function useTabs() {
const ctx = useContext(TabsContext);
if (!ctx) throw new Error('useTabs must be used inside <Tabs>');
return ctx;
}Composants composés polymorphes
Permettez aux parents d’effectuer le rendu de n’importe quel élément grâce à une propriété as ou au modèle asChild (l’approche de Radix UI). Les composants composés peuvent ainsi être combinés avec du JSX arbitraire.
Modèles de composants composés sans interface
Les bibliothèques sans interface (Radix, Headless UI) fournissent des composants composés sans style : la logique d’accessibilité est intégrée et vous appliquez les styles dont vous avez besoin.
Piège : inspection des enfants
Un ancien modèle utilisait React.Children pour inspecter les enfants : il était fragile et peu fiable. Préférez toujours le contexte pour partager l’état.
Vérification rapide
Dans un modèle de composants composés, comment les composants enfants communiquent-ils avec leur parent ?
Récapitulatif : composants composés
Les composants composés permettent à des parties associées de fonctionner comme une seule unité déclarative. Utilisez Context pour partager l’état : Provider dans le parent, useContext dans les enfants. Associez les sous-composants comme propriétés statiques pour faciliter leur découverte. Exportez un hook personnalisé comme API publique. Radix et Headless UI sont d’excellentes références. Préférez le contexte à l’inspection avec Children.
Questions Fréquemment Posées
La leçon « Composants composés avec Context » est-elle gratuite ?
Oui — le texte complet de « Composants composés avec Context » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Composants composés avec Context » ?
Partagez un état implicite entre un composant parent et ses enfants désignés à l’aide de Context, en modélisant des API comme et . Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Composants composés avec Context » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Composants composés avec Context
- Render Props et schémas HOC
- Portails pour les modales et les infobulles
- Frontières d’erreur