Props og komposition
Send props, angiv standardprops via destructuring, sammenlign komposition med nedarvning, udforsk children-/slots-mønstre, og byg enkle præsentationskomponenter.
Props og komposition er en gratis React Academy-lektion på CoddyKit. Dette er lektion 2 af 3. 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 3 lektioner i alt.
Oversigt
Mål: Send data med props, angiv standardværdier, og opbyg brugergrænseflader ved at sammensætte små komponenter.
- Props transporterer data ind i komponenter.
- Standardværdier via enkel destrukturering.
- Komposition og pladser til children.
Overførsel af props
Props er skrivebeskyttede inputværdier. En overordnet komponent gengiver en underkomponent og leverer værdier; underkomponenten læser dem fra sine parametre.
- Du må ikke ændre props.
- Gengivelse igen sker, når overordnede komponenter ændrer tilstand eller props.
Standardprops (enkle)
Giv props standardværdier ved at destrukturere i parameterlisten: function Card({ title = "Untitled" }).
- Det gør komponenter robuste.
- Det undgår kontroller af undefined i markuppen.
Komposition, ikke nedarvning
Komposition betyder, at større brugergrænseflader bygges af mindre dele (children/pladser). Foretræk det frem for nedarvning for at opnå fleksibilitet og et tydeligt dataflow.
Demo: props og children
Eksempel: Overfør props, angiv standardværdier, og sammensæt children i et enkelt kortlayout.
<div id="root"></div>
Genanvendelig præsentation
Præsentationskomponenter fokuserer på layout og visuelle elementer; hold dem prop-styrede og uden tilstand, når det er muligt, så de nemt kan genbruges.
- Lille API-overflade (kun props).
- Stil via klasser; undgå skjulte bivirkninger.
Komposition kontra nedarvning
Opsummering
Opsummering: Overfør data med props, angiv sikre standardværdier, og sammensæt children for at bygge fleksible, genanvendelige brugergrænseflader; undgå hierarkier baseret på nedarvning.
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
Ofte stillede spørgsmål
Er lektionen “Props og komposition” gratis?
Ja — hele teksten til “Props og komposition” 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 3 lektioner i alt.
Hvad lærer jeg i “Props og komposition”?
Send props, angiv standardprops via destructuring, sammenlign komposition med nedarvning, udforsk children-/slots-mønstre, og byg enkle præsentationskomponenter. 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 3.
Hvor lang tid tager lektionen “Props og komposition”?
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
- Send props og kompositionsmønstre
- Props og komposition
- Genanvendelige præsentationskomponenter