React Academy · Lektion

Inspektion af komponenttræer og props

Gå ned gennem komponenthierarkier, og læs aktuelle prop- og state-værdier.

Lektion 2 af 413 trin

Inspektion af komponenttræer og props er en gratis React Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion lærer du at gå i dybden med indlejrede komponenthierarkier i React DevTools og læse komplekse prop- og tilstandsværdier fra sidepanelet i panelet Komponenter.

Komponenttræet er et spejl

Alle komponenter, du ser i udviklerværktøjerne, afspejler din JSX-indlejring. Roden er som regel din App-komponent. Underordnede komponenter er indrykket under deres overordnede komponenter, præcis som de vises i kildekoden.

Valg af en komponent

Klik på et hvilket som helst komponentnavn i træet. Højre panel viser straks dens **props**, **hooks** (tilstand, effekter og refs) samt den **kildefil** og det linjenummer, hvor den blev defineret.

Læsning af tekst- og talprops

Tekstprops vises i anførselstegn: `"hello"`. Tal vises uden anførselstegn: `42`. Booleske værdier vises som `true` eller `false`. Du kan holde markøren over en værdi for at se hele dens indhold, hvis den er forkortet.

Udvidelse af objekt- og arrayprops

Når en prop-værdi er et objekt eller et array, viser udviklerværktøjerne et træ, der kan foldes ud og sammen. Klik på pilen ved siden af `{…}` eller `[…]` for at udvide det og se alle indlejrede nøgler og værdier.

Inspicering af funktionsprops

Funktionsprops (som `onClick`-handlere) vises som `f onClick()`. Du kan klikke på det lille pilikon ved siden af dem for at springe til funktionsdefinitionen i panelet Kilder.

Filtrering af træet

Brug søgefeltet øverst i panelet Komponenter til at filtrere efter navn. Skriv `Button` for kun at vise komponenter, hvis navn indeholder *Button*. Det er praktisk i applikationer med hundredvis af komponenter.

Spring fra DOM til React

I fanen **Elementer** skal du højreklikke på en DOM-node og vælge **Inspicer React-komponent** (tilgængelig, når udviklerværktøjerne er installeret). Udviklerværktøjerne skifter til fanen Komponenter og vælger den React-komponent, der gengav noden.

Redigering af props i udviklerværktøjerne

Dobbeltklik på en prop-værdi i udviklerværktøjerne for at redigere den i realtid. Komponenten gengives straks igen med den nye værdi. Det er nyttigt til at teste randtilfælde uden at ændre kildekoden.

Kopiér props som JSON

Højreklik på en prop- eller tilstandsværdi i udviklerværktøjerne, og vælg **Kopiér værdi**. Værdien kopieres som JSON til udklipsholderen, hvilket er praktisk, når den skal indsættes i test eller dokumentation.

Hurtigt tjek

Hvordan udvider du en objekt- eller arrayprop i panelet Komponenter i React DevTools?

Besvar den i den interaktive lektion

Opsummering

Du kan nu navigere i komponenttræer, læse tekststrenge, tal, objekter og funktioner, filtrere efter navn, springe fra DOM-elementer til React-komponenter og redigere props direkte i udviklerværktøjerne.

Næste lektion

Næste lektion: **Brug af Profiler-fanen** — du optager gengivelser, læser flammegrafer og finder de komponenter, der er ansvarlige for langsomme interaktioner.

Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 88
Lektioner: 324

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Inspektion af komponenttræer og props” gratis?

Ja — hele teksten til “Inspektion af komponenttræer og props” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Inspektion af komponenttræer og props”?

Gå ned gennem komponenthierarkier, og læs aktuelle prop- og state-værdier. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Inspektion af komponenttræer og props”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Installation og åbning af React DevTools
Inspektion af komponenttræer og props
Brug af fanen Profiler
Fejlfinding af almindelige React-fejl

← Tilbage til React Academy