Compound Components mit Context
Erstellen Sie mehrteilige Components, die ihren Zustand über Context gemeinsam nutzen.
Compound Components mit Context ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Compound Components
Eine Compound Component ist eine logische UI, die in mehrere miteinander koordinierte Unterkomponenten aufgeteilt ist, zum Beispiel Tabs + Tab + TabPanel.
Gemeinsamer Status über Context
Die übergeordnete Komponente legt den gemeinsamen Status im Context ab; die untergeordneten Komponenten lesen ihn über getContext.
<!-- Tabs.svelte -->
setContext("tabs", { active, setActive });Kind liest Context
Jedes Tab und jedes TabPanel ruft die gemeinsame API ab.
<!-- Tab.svelte -->
const { active, setActive } = getContext("tabs");Lose Kopplung
Die untergeordneten Komponenten verweisen nicht direkt auf die übergeordnete Komponente, sondern kommunizieren über den Context.
Komponierbare API
Anwender können die Unterkomponenten frei neu anordnen und anpassen.
<Tabs>
<TabList>
<Tab id="a">A</Tab>
<Tab id="b">B</Tab>
</TabList>
<TabPanel id="a">Content A</TabPanel>
<TabPanel id="b">Content B</TabPanel>
</Tabs>Beispiele
Tabs, Accordion, Menu, Listbox, Steps.
Namenskonvention
Verwenden Sie ein gemeinsames Präfix oder Namespace-Exporte für mehr Übersichtlichkeit.
import { Tabs, Tab, TabList, TabPanel } from "$lib/Tabs";Typsicherer Context
Definieren Sie einen Symbolschlüssel und einen Typ für die gemeinsame API.
Fehler bei falscher Verwendung
Wenn eine untergeordnete Komponente den Context nicht findet, lösen Sie einen verständlichen Fehler aus, der Anwender bei der Fehlerbehebung unterstützt.
Wiederverwendbarkeit
Compound Components sind besonders gut wiederverwendbar, weil Anwender die Komposition bestimmen.
Mit Buildern kombinieren
Compound Components verwenden intern häufig das Builder-Pattern, um eine headless Lösung mit Barrierefreiheit bereitzustellen.
Kurze Überprüfung
Wie teilen Compound Components ihren Status?
Zusammenfassung
Compound Components teilen eine UI in komponierbare Unterkomponenten auf, die über Context miteinander koordiniert werden.
Häufig gestellte Fragen
Ist die Lektion „Compound Components mit Context“ kostenlos?
Ja — der vollständige Text von „Compound Components 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 Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Compound Components mit Context“?
Erstellen Sie mehrteilige Components, die ihren Zustand über Context gemeinsam nutzen. Du übst Sveltejs 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 Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs 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 4 von 4.
Wie lange dauert die Lektion „Compound Components 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 Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs 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
- Render Props mit Snippets
- Higher-Order Components
- Das Builder-Pattern für Headless UI
- Compound Components mit Context