Props übergeben und Kompositionsmuster
Übergeben Sie Props und stellen Sie per Destrukturierung Standardwerte bereit. Vergleichen Sie Komposition mit Vererbung und lernen Sie children- sowie Slot-ähnliche Muster für flexible UIs kennen.
Props übergeben und Kompositionsmuster ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. 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 React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Überblick
Ziel: Übergeben Sie Daten mit Props, legen Sie Standardwerte fest und erstellen Sie UIs durch Komposition mit Children/Slots.
Grundlagen zum Übergeben von Props
Props sind schreibgeschützte Eingaben vom Parent zum Child. Parents rendern Children mit Attributen; Children lesen sie über Parameter.
- Verändern Sie Props nicht.
- Erneutes Rendern erfolgt, wenn sich Props oder State des Parents ändern.
Demo: Standardwerte für Props
Geben Sie Props Standardwerte durch Destrukturierung der Parameter, damit Komponenten robust bleiben.
<div id="root"></div>
Komposition statt Vererbung
Komposition setzt UIs aus kleineren Teilen (Children/Slots) zusammen und wird wegen ihrer Flexibilität und des klaren Datenflusses der Vererbung vorgezogen.
Demo: Children und Slots
Verwenden Sie children und benannte, slotähnliche Props, um das Layout ohne Vererbung anzupassen.
<div id="root"></div>
Tipps und Fallstricke
Tipps:
- Dokumentieren Sie Prop-Namen und Standardwerte.
- Bevorzugen Sie kleine, fokussierte Children/Slots.
- Vermeiden Sie tiefe Vererbungsketten.
Prüfung zu Standardwerten für Props
Zusammenfassung
Zusammenfassung: Übergeben Sie Daten über Props, fügen Sie durch Destrukturierung Standardwerte hinzu und bevorzugen Sie Komposition (Children/Slots) gegenüber Vererbung für wiederverwendbare UIs.
Häufig gestellte Fragen
Ist die Lektion „Props übergeben und Kompositionsmuster“ kostenlos?
Ja — der vollständige Text von „Props übergeben und Kompositionsmuster“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Props übergeben und Kompositionsmuster“?
Übergeben Sie Props und stellen Sie per Destrukturierung Standardwerte bereit. Vergleichen Sie Komposition mit Vererbung und lernen Sie children- sowie Slot-ähnliche Muster für flexible UIs kennen. Du übst React 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 React Academy zu starten?
Keine Vorkenntnisse erforderlich. React 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 3.
Wie lange dauert die Lektion „Props übergeben und Kompositionsmuster“?
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 React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React 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
- Props übergeben und Kompositionsmuster
- Props und Komposition
- Wiederverwendbare Präsentationskomponenten