Listor och keys; villkorsstyrd rendering
Rendera arrayer med map(), välj stabila keys, hantera tomma och laddande tillstånd och använd vanliga villkorsmönster.
Listor och keys; villkorsstyrd rendering är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 3 lektioner.
Översikt
Mål: Rendera arrayer säkert och tydligt med keys och använd enkla villkor för tomma och laddande UI:n.
map() för att rendera arrayer
Använd array.map() för att omvandla data till element. Varje direkt underordnat element i en lista behöver en key-prop för stabil reconciliation.
Demo: lista + keys
Föredra stabila id:n från datan som key och undvik arrayindex, såvida listan inte är statisk.
<div id="root"></div>
Grunderna i villkorad rendering
Villkor:
- Tomt läge: visa ett tydligt meddelande när listan är tom.
- Laddning: visa en spinner eller ett skeleton.
- Renderingsalternativ: cond ? A : B eller cond && A.
Demo: laddande och tomt UI
Hantera fallen laddning och tomt uttryckligen för att undvika tomma skärmar.
<div id="root"></div>
Tips om keys och villkor
Tips:
- Använd stabila id:n som keys och undvik index för dynamiska listor.
- Placera key på det yttersta elementet som skapas av map.
- Håll villkoren små och lättlästa.
Bästa praxis för keys
Sammanfattning
Sammanfattning: Omvandla arrayer till element med stabila keys och hantera laddande och tomma lägen med enkla villkorsmönster.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Listor och keys; villkorsstyrd rendering” gratis?
Ja – hela texten till ”Listor och keys; villkorsstyrd rendering” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Listor och keys; villkorsstyrd rendering”?
Rendera arrayer med map(), välj stabila keys, hantera tomma och laddande tillstånd och använd vanliga villkorsmönster. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 3.
Hur lång tid tar lektionen ”Listor och keys; villkorsstyrd rendering”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- JSX-regler: uttryck, attribut och fragments
- Listor och keys; villkorsstyrd rendering
- Stylingalternativ: CSS Modules, inline-stilar och class helpers