Zusammengesetzte Komponenten mit Context
Teilen Sie impliziten Zustand zwischen einer übergeordneten Komponente und ihren dafür vorgesehenen untergeordneten Komponenten mithilfe von Context und bilden Sie APIs wie und nach.
Zusammengesetzte Komponenten mit Context ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Compound Components?
Compound Components sind Gruppen zusammengehöriger Komponenten, die als eine Einheit zusammenarbeiten sollen – ähnlich wie HTMLs <select> und <option>. Der Parent teilt impliziten Zustand mit seinen spezifischen Children.
Das Ziel: sauberere APIs
Statt <Select options={[...]} value={x} onChange={...} /> schreiben Sie <Select><Option value="a">Apple</Option></Select>. Die Struktur ist deklarativ und entspricht dem JSX-Stil.
Naiver Ansatz (Problem)
Wenn Sie den Zustand über Props weitergeben, muss der Nutzer alles selbst verdrahten. Children kennen den Zustand des Parents nicht automatisch.
// Without compound pattern — verbose:
<Tabs activeIndex={0} onChange={setIndex}>
<TabList>
<Tab index={0}>Home</Tab>
<Tab index={1}>Profile</Tab>
</TabList>
</Tabs>Context als Verbindung
Der Parent erstellt einen Context mit dem gemeinsamen Zustand und stellt ihn bereit. Die Children konsumieren den Context – eine explizite Weitergabe über Props ist nicht erforderlich.
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>
);
}Child-Komponenten konsumieren den Context
Jedes Child liest den Context aus, sodass Props nicht durch den gesamten Komponentenbaum weitergereicht werden müssen.
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>;
}Statische Eigenschaften zur besseren Auffindbarkeit
Hängen Sie die Subkomponenten an den Parent, damit Nutzer sie über die Autovervollständigung entdecken können.
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>Praxisbeispiel: Disclosure
Ein Disclosure-Widget enthält die Children Trigger und Panel, die über einen Context einen gemeinsamen geöffneten oder geschlossenen Zustand verwenden.
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;
}Hooks als öffentliche API
Exportieren Sie einen benutzerdefinierten Hook, damit Nutzer darauf aufbauend eigene Komponenten erstellen können.
export function useTabs() {
const ctx = useContext(TabsContext);
if (!ctx) throw new Error('useTabs must be used inside <Tabs>');
return ctx;
}Polymorphe Compound Components
Ermöglichen Sie es den Parents, über eine as-Prop oder das Muster asChild ein beliebiges Element zu rendern (der Ansatz von Radix UI). Dadurch können Compound Components mit beliebigem JSX kombiniert werden.
Headless-Compound-Muster
Headless-Bibliotheken (Radix, Headless UI) liefern Compound Components ohne Styling. Die Accessibility-Logik ist bereits integriert, während Sie das Styling nach Bedarf selbst übernehmen.
Fallstrick: Children untersuchen
Ein älteres Muster verwendete React.Children, um Children zu untersuchen – das ist fragil und störanfällig. Verwenden Sie für die gemeinsame Verwaltung von Zustand immer Context.
Kurze Überprüfung
Wie kommunizieren Child-Komponenten in einem Compound-Component-Muster mit ihrem Parent?
Zusammenfassung: Compound Components
Compound Components ermöglichen es zusammengehörigen Teilen, als eine deklarative Einheit zusammenzuarbeiten. Verwenden Sie Context, um Zustand zu teilen: den Provider im Parent und useContext in den Children. Hängen Sie Subkomponenten als statische Eigenschaften an, damit sie leichter auffindbar sind. Exportieren Sie einen benutzerdefinierten Hook als öffentliche API. Radix und Headless UI sind gute Referenzen. Bevorzugen Sie Context gegenüber der Untersuchung mit Children.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „Zusammengesetzte Komponenten mit Context“ kostenlos?
Ja — der vollständige Text von „Zusammengesetzte Komponenten mit Context“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Zusammengesetzte Komponenten mit Context“?
Teilen Sie impliziten Zustand zwischen einer übergeordneten Komponente und ihren dafür vorgesehenen untergeordneten Komponenten mithilfe von Context und bilden Sie APIs wie und nach. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Zusammengesetzte Komponenten mit Context“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Zusammengesetzte Komponenten mit Context
- Render Props und HOC-Muster
- Portals für Modals und Tooltips
- Error Boundaries