Listen und Keys; bedingtes Rendering
Rendern Sie Arrays mit map(), wählen Sie stabile Keys, behandeln Sie leere und ladende Zustände und wenden Sie gängige bedingte Muster an.
Listen und Keys; bedingtes Rendering ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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: Rendern Sie Arrays sicher und übersichtlich mit keys und verwenden Sie einfache bedingte Muster für leere oder ladende UIs.
map() zum Rendern von Arrays
Verwenden Sie array.map(), um Daten in Elemente umzuwandeln. Jedes direkte Kindelement in einer Liste benötigt für eine stabile Rekonsilierung eine key-Prop.
Demo: Liste + Keys
Verwenden Sie vorzugsweise stabile IDs aus Ihren Daten als key; vermeiden Sie Array-Indizes, außer wenn die Liste statisch ist.
<div id="root"></div>
Grundlagen des bedingten Renderns
Bedingungen:
- Leerer Zustand: Zeigen Sie eine freundliche Nachricht an, wenn die Liste leer ist.
- Ladezustand: Zeigen Sie einen Spinner oder ein Skeleton an.
- Darstellungsoptionen: cond ? A : B oder cond && A.
Demo: UI für Lade- und Leerzustand
Behandeln Sie Lade- und Leerzustände ausdrücklich, um leere Bildschirme zu vermeiden.
<div id="root"></div>
Tipps zu Keys und Bedingungen
Tipps:
- Verwenden Sie stabile IDs als Keys; vermeiden Sie Indizes bei dynamischen Listen.
- Platzieren Sie den Key am äußersten Element der Zuordnung.
- Halten Sie Bedingungen klein und gut lesbar.
Bewährte Vorgehensweise für Keys
Zusammenfassung
Zusammenfassung: Wandeln Sie Arrays mit stabilen Keys in Elemente um und behandeln Sie Lade- und Leerzustände mit einfachen bedingten Mustern.
Lerne React 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
- 88
- Lektionen
- 324
Häufig gestellte Fragen
Ist die Lektion „Listen und Keys; bedingtes Rendering“ kostenlos?
Ja — der vollständige Text von „Listen und Keys; bedingtes Rendering“ 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 „Listen und Keys; bedingtes Rendering“?
Rendern Sie Arrays mit map(), wählen Sie stabile Keys, behandeln Sie leere und ladende Zustände und wenden Sie gängige bedingte Muster an. 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 2 von 3.
Wie lange dauert die Lektion „Listen und Keys; bedingtes Rendering“?
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
- JSX-Regeln: Ausdrücke, Attribute und Fragmente
- Listen und Keys; bedingtes Rendering
- Styling-Optionen: CSS Modules, Inline-Styles und Klassen-Helfer