Listat, avaimet ja ehdollinen renderöinti
Renderöi elementtitaulukoita .map()-metodilla, anna niille vakaat key-propsit ja renderöi elementtejä ehdollisesti &&-operaattorilla ja ternäärioperaattorilla
Listat, avaimet ja ehdollinen renderöinti on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Luetteloiden renderöinti .map()-metodilla
Renderöi dynaaminen luettelo kutsumalla taulukon .map()-metodia ja palauttamalla jokaista kohdetta vastaava JSX. React renderöi elementtitaulukon samalla tavalla kuin yksittäisen elementin.
const fruits = ['apple', 'banana', 'cherry'];
return (
<ul>
{fruits.map(fruit => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);key-proppi — miksi sillä on väliä
key on erityinen React-proppi, joka auttaa sitä tunnistamaan, mitkä luettelon kohteet ovat muuttuneet, lisätty tai poistettu. Ilman avaimia (tai käytettäessä epävakaita avaimia, kuten indeksejä) React saattaa tehdä virheellisiä päivityksiä.
Hyvät ja huonot avaimet
Hyviä avaimia ovat datan yksilölliset ja vakaat tunnisteet (esimerkiksi item.id). Huonoja avaimia ovat taulukkoindeksit (kohteet voivat vaihtaa järjestystä) ja satunnaiset arvot (ne muuttuvat jokaisella renderöinnillä).
// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}
// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}Ol iyoiden renderöinti
Muuta oliotaulukko komponenteiksi destrukturoimalla oliot propseiksi.
interface Todo { id: number; text: string; done: boolean; }
const todos: Todo[] = [...];
return (
<ul>
{todos.map(({ id, text, done }) => (
<TodoItem key={id} text={text} done={done} />
))}
</ul>
);Ehdollinen renderöinti &&-operaattorilla
Käytä &&-lyhytpiirioperaattoria JSX:n ehdolliseen sisällyttämiseen. Jos vasen puoli on epätosi, mitään ei renderöidä. Varo epätosia lukuja — 0 renderöidään muodossa '0'.
function Status({ count }: { count: number }) {
return (
<div>
{count > 0 && <Badge count={count} />}
{/* Safer: */}
{count > 0 ? <Badge count={count} /> : null}
</div>
);
}Ehdollinen renderöinti ternäärioperaattorilla
Käytä ternäärioperaattoria renderöidäksesi ehdon perusteella jommankumman kahdesta elementistä.
function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
return isLoggedIn
? <button onClick={logout}>Sign Out</button>
: <button onClick={login}>Sign In</button>;
}Ehdollinen renderöinti if-lauseella
Monimutkaisissa ehdoissa käytä if-lausetta ennen return-lausetta. Palauta lataus- ja virhetilanteissa arvo aikaisin.
function UserProfile({ user }: { user: User | null }) {
if (!user) return <p>Loading...</p>;
if (user.banned) return <p>Account suspended.</p>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}Suodata ennen map-muunnosta
Suodata taulukko ennen sen map-muunnosta, jotta renderöit vain ehdot täyttävät kohteet. Näin koodista tulee selkeää ja helposti luettavaa.
const activeUsers = users.filter(u => u.active);
return (
<ul>
{activeUsers.map(user => (
<UserItem key={user.id} {...user} />
))}
</ul>
);Tyhjä tila
Käsittele aina tyhjän taulukon tapaus. Tyhjän luettelon renderöinti ilman ilmoitusta on hämmentävää — näytä sen sijaan hyödyllinen viesti, joka kertoo tilan olevan tyhjä.
return (
<div>
{todos.length === 0
? <p className="empty-state">No tasks yet. Add one above!</p>
: <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
}
</div>
);Portaalien käyttäminen listojen renderöintiin
Pitkät listat, joiden on näyttävä toisessa DOM-solmussa, kuten avattavassa valikossa, voivat käyttää ReactDOM.createPortal-funktiota. Useimmiten listojen renderöinti tapahtuu kuitenkin suoraviivaisesti komponenttipuussa.
Virtualisoidut listat suorituskyvyn parantamiseksi
Erittäin pitkissä listoissa, joissa on vähintään 1 000 alkiota, käyttäkää virtualisointikirjastoa, kuten react-window- tai @tanstack/react-virtual-kirjastoa. Ne renderöivät vain näkyvät rivit ja välttävät näin DOM:n suorituskykyongelmat.
Pikatarkistus
Milloin taulukon indeksin käyttäminen key-arvona React-listoissa on hyväksyttävää?
Kertaus: listat ja ehdollinen renderöinti
Renderöikää listat .map()-metodilla. Lisätkää aina vakaa ja yksilöllinen key-props. Käyttäkää &&-operaattoria valinnaisille elementeille ja huomioikaa arvo 0. Käyttäkää ternääriä, kun vaihtoehtoja on kaksi. Käyttäkää early return -rakenteita lataus- ja virhetilanteissa. Suodattakaa ehdollisia listoja ennen niiden map-käsittelyä. Näyttäkää tyhjästä taulukosta ilmoittava viesti. Virtualisoikaa erittäin pitkät listat.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Listat, avaimet ja ehdollinen renderöinti” ilmainen?
Kyllä – oppitunnin ”Listat, avaimet ja ehdollinen renderöinti” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Listat, avaimet ja ehdollinen renderöinti”?
Renderöi elementtitaulukoita .map()-metodilla, anna niille vakaat key-propsit ja renderöi elementtejä ehdollisesti &&-operaattorilla ja ternäärioperaattorilla Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Listat, avaimet ja ehdollinen renderöinti”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- JSX: syntaksi ja transpilaus
- Funktionaaliset komponentit ja propsit
- useState-hook: tila ja uudelleenrenderöinnit
- Listat, avaimet ja ehdollinen renderöinti