React Academy · Lektion

Komponentenbäume und Props untersuchen

Untersuchen Sie Komponentenhierarchien und lesen Sie aktuelle Prop- und State-Werte aus.

Komponentenbäume und Props untersuchen ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion lernen Sie, in React DevTools verschachtelte Komponentenhierarchien zu untersuchen und komplexe Prop- und State-Werte in der Seitenleiste des Components-Panels zu lesen.

Der Komponentenbaum ist ein Spiegelbild

Jede Komponente, die Sie in DevTools sehen, spiegelt die Verschachtelung Ihres JSX wider. Die Wurzel ist normalerweise Ihre App-Komponente. Untergeordnete Komponenten sind unter ihren übergeordneten Komponenten eingerückt – genau wie im Quellcode.

Eine Komponente auswählen

Klicken Sie im Baum auf einen beliebigen Komponentennamen. Im rechten Panel werden sofort die **Props**, die **Hooks** (State, Effects, Refs) sowie die **Quelldatei** und Zeilennummer angezeigt, an denen die Komponente definiert wurde.

String- und Number-Props lesen

String-Props werden in Anführungszeichen angezeigt: `"hello"`. Zahlen erscheinen ohne Anführungszeichen: `42`. Boolesche Werte werden als `true` oder `false` angezeigt. Wenn ein Wert abgeschnitten ist, können Sie mit dem Mauszeiger darauf zeigen, um den vollständigen Inhalt zu sehen.

Objekt- und Array-Props aufklappen

Wenn ein Prop-Wert ein Objekt oder Array ist, zeigt DevTools einen auf- und zuklappbaren Baum an. Klicken Sie auf den Pfeil neben `{…}` oder `[…]`, um ihn aufzuklappen und jeden verschachtelten Schlüssel und Wert anzuzeigen.

Function-Props untersuchen

Function-Props (zum Beispiel `onClick`-Handler) werden als `f onClick()` angezeigt. Sie können auf das kleine Pfeilsymbol daneben klicken, um im Sources-Panel zur Funktionsdefinition zu springen.

Den Baum filtern

Verwenden Sie das Suchfeld oben im Components-Panel, um nach Namen zu filtern. Geben Sie `Button` ein, um nur Komponenten anzuzeigen, deren Name *Button* enthält. Das ist besonders hilfreich in Anwendungen mit Hunderten von Komponenten.

Vom DOM zu React springen

Klicken Sie im Tab **Elements** mit der rechten Maustaste auf einen DOM-Knoten und wählen Sie **Inspect React component** (verfügbar, wenn DevTools installiert ist). DevTools wechselt zum Tab Components und wählt die React-Komponente aus, die diesen Knoten gerendert hat.

Props in DevTools bearbeiten

Doppelklicken Sie in DevTools auf einen Prop-Wert, um ihn live zu bearbeiten. Die Komponente wird sofort mit dem neuen Wert erneut gerendert. Das ist nützlich, um Sonderfälle zu testen, ohne den Quellcode zu ändern.

Props als JSON kopieren

Klicken Sie in DevTools mit der rechten Maustaste auf einen beliebigen Prop- oder State-Wert und wählen Sie **Copy value**. Dadurch wird der Wert als JSON in Ihre Zwischenablage kopiert – praktisch zum Einfügen in Tests oder Dokumentationen.

Kurze Überprüfung

Wie klappen Sie im Components-Panel von React DevTools ein Objekt- oder Array-Prop auf?

Zusammenfassung

Sie können nun in Komponentenbäumen navigieren, Strings, Zahlen, Objekte und Funktionen lesen, nach Namen filtern, von DOM-Elementen zu React-Komponenten springen und Props in DevTools live bearbeiten.

Als Nächstes

Nächste Lektion: **Den Profiler-Tab verwenden** – Sie werden Render-Vorgänge aufzeichnen, Flammendiagramme lesen und die für langsame Interaktionen verantwortlichen Komponenten ermitteln.

Häufig gestellte Fragen

Ist die Lektion „Komponentenbäume und Props untersuchen“ kostenlos?

Ja — der vollständige Text von „Komponentenbäume und Props untersuchen“ 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 4 Lektionen.

Was lerne ich in „Komponentenbäume und Props untersuchen“?

Untersuchen Sie Komponentenhierarchien und lesen Sie aktuelle Prop- und State-Werte aus. 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 4.

Wie lange dauert die Lektion „Komponentenbäume und Props untersuchen“?

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

← Zurück zu React Academy