React Academy · Lekcja

Inspekcja drzewa komponentów i propsów

Analizuj hierarchie komponentów i odczytuj bieżące wartości propsów oraz stanu

Lekcja 2 z 413 kroki

Inspekcja drzewa komponentów i propsów to bezpłatna lekcja React Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Witamy

W tej lekcji nauczą się Państwo analizować zagnieżdżone hierarchie komponentów w React DevTools oraz odczytywać złożone wartości props i stanu z panelu bocznego karty Components.

Drzewo komponentów jest odzwierciedleniem

Każdy komponent widoczny w narzędziach deweloperskich odzwierciedla zagnieżdżenie JSX. Korzeniem jest zwykle komponent App. Komponenty potomne są wcięte pod swoimi rodzicami, dokładnie tak, jak pojawiają się w kodzie źródłowym.

Wybieranie komponentu

Należy kliknąć dowolną nazwę komponentu w drzewie. Prawy panel natychmiast wyświetli jego **props**, **hooks** (stan, efekty, referencje), a także plik **source** i numer wiersza, w którym został zdefiniowany.

Odczytywanie props typu string i number

Props typu string są wyświetlane w cudzysłowie: `"hello"`. Liczby są wyświetlane bez cudzysłowów: `42`. Wartości logiczne są wyświetlane jako `true` lub `false`. Można najechać kursorem na wartość, aby zobaczyć jej pełną treść, jeśli została skrócona.

Rozwijanie props typu object i array

Gdy wartość props jest obiektem lub tablicą, DevTools wyświetla zwijane drzewo. Należy kliknąć strzałkę obok `{…}` lub `[…]`, aby je rozwinąć i zobaczyć każdy zagnieżdżony klucz oraz wartość.

Inspekcja props będących funkcjami

Props będące funkcjami (np. handlery `onClick`) są wyświetlane jako `f onClick()`. Można kliknąć małą ikonę strzałki obok nich, aby przejść do definicji funkcji w panelu Sources.

Filtrowanie drzewa

Pole wyszukiwania u góry panelu Components umożliwia filtrowanie według nazwy. Wpisanie `Button` wyświetli tylko komponenty, których nazwa zawiera *Button*. Jest to przydatne w aplikacjach zawierających setki komponentów.

Przechodzenie z DOM do React

Na karcie **Elements** należy kliknąć prawym przyciskiem węzeł DOM i wybrać **Inspect React component** (opcja dostępna po zainstalowaniu DevTools). DevTools przełączy się na kartę Components i wybierze komponent React, który wyrenderował ten węzeł.

Edycja props w DevTools

Dwukrotne kliknięcie wartości props w DevTools umożliwia jej edycję na żywo. Komponent natychmiast renderuje się ponownie z nową wartością. Jest to przydatne podczas testowania przypadków brzegowych bez zmieniania kodu źródłowego.

Kopiowanie props jako JSON

Należy kliknąć prawym przyciskiem dowolną wartość props lub stanu w DevTools i wybrać **Copy value**. Spowoduje to skopiowanie wartości jako JSON do schowka, co ułatwia wklejenie jej do testów lub dokumentacji.

Szybkie sprawdzenie

Jak rozwinąć props będący obiektem lub tablicą w panelu Components narzędzi React DevTools?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Mogą już Państwo poruszać się po drzewach komponentów, odczytywać wartości typu string, number, object i function, filtrować je według nazwy, przechodzić od elementów DOM do komponentów React oraz edytować props na żywo w DevTools.

Następny krok

Następna lekcja: **Using the Profiler Tab** — nagrają Państwo renderowania, odczytają wykresy płomieniowe i wskażą komponenty odpowiedzialne za powolne interakcje.

Bezpłatny start

Ucz się React dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 88
Lekcje: 324

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Inspekcja drzewa komponentów i propsów” jest bezpłatna?

Tak — pełny tekst „Inspekcja drzewa komponentów i propsów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Inspekcja drzewa komponentów i propsów”?

Analizuj hierarchie komponentów i odczytuj bieżące wartości propsów oraz stanu Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Inspekcja drzewa komponentów i propsów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Instalowanie i otwieranie React DevTools
Inspekcja drzewa komponentów i propsów
Korzystanie z karty Profiler
Debugowanie typowych błędów React

← Powrót do React Academy