React Academy · leksjon

Inspisere komponenttrær og props

Gå inn i komponenthierarkier og les gjeldende prop- og state-verdier.

Leksjon 2 av 413 trinn

Inspisere komponenttrær og props er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen lærer du å gå i dybden på nestede komponenthierarkier i React DevTools og lese komplekse prop- og state-verdier fra sidepanelet i Components.

Komponenttreet er et speil

Hver komponent du ser i DevTools, gjenspeiler nestingen i JSX. Roten er vanligvis App-komponenten. Underordnede komponenter står med innrykk under foreldrene, akkurat slik de vises i kildekoden.

Velge en komponent

Klikk på et hvilket som helst komponentnavn i treet. Panelet til høyre viser umiddelbart komponentens **props**, **hooks** (state, effekter og refs) samt **source**-filen og linjenummeret der den ble definert.

Lese string- og number-props

String-props vises med anførselstegn: `"hello"`. Tall vises uten anførselstegn: `42`. Boolsk verdi vises som `true` eller `false`. Du kan holde markøren over en verdi for å se hele innholdet hvis det er forkortet.

Utvide object- og array-props

Når en prop-verdi er et objekt eller en array, viser DevTools et sammenleggbart tre. Klikk på pilen ved siden av `{…}` eller `[…]` for å utvide det og se hver nestede nøkkel og verdi.

Inspisere function-props

Function-props, for eksempel `onClick`-handlere, vises som `f onClick()`. Du kan klikke på det lille pilikonet ved siden av dem for å hoppe til funksjonsdefinisjonen i Sources-panelet.

Filtrere treet

Bruk søkefeltet øverst i Components-panelet for å filtrere etter navn. Skriv inn `Button` for å vise bare komponenter med *Button* i navnet. Dette er nyttig i apper med hundrevis av komponenter.

Hoppe fra DOM til React

I fanen **Elements** høyreklikker du på en DOM-node og velger **Inspect React component** (tilgjengelig når DevTools er installert). DevTools bytter til fanen Components og velger React-komponenten som gjenga noden.

Redigere props i DevTools

Dobbeltklikk på en prop-verdi i DevTools for å redigere den direkte. Komponenten gjengis på nytt umiddelbart med den nye verdien. Dette er nyttig for å teste grenseverdier uten å endre kildekoden.

Kopiere props som JSON

Høyreklikk på en prop- eller state-verdi i DevTools og velg **Copy value**. Verdien kopieres som JSON til utklippstavlen, noe som er praktisk når du skal lime den inn i tester eller dokumentasjon.

Hurtigsjekk

Hvordan utvider du en object- eller array-prop i Components-panelet i React DevTools?

Besvar den i den interaktive leksjonen

Oppsummering

Nå kan du navigere i komponenttrær, lese strenger, tall, objekter og funksjoner, filtrere etter navn, hoppe fra DOM-elementer til React-komponenter og redigere props direkte i DevTools.

Neste

Neste leksjon: **Bruke Profiler-fanen** – du skal ta opp gjengivelser, lese flammegrafer og finne komponentene som er ansvarlige for trege interaksjoner.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Inspisere komponenttrær og props» gratis?

Ja – hele teksten i «Inspisere komponenttrær og props» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Inspisere komponenttrær og props»?

Gå inn i komponenthierarkier og les gjeldende prop- og state-verdier. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Inspisere komponenttrær og props»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til React Academy