Liste di reazione
In React, renderai gli elenchi con un tipo di loop.
Il metodo array JavaScript map()è generalmente il metodo preferito.
Se hai bisogno di un aggiornamento sul map()metodo, controlla la
sezione ES6 .
Esempio:
Eseguiamo il rendering di tutte le auto del nostro garage:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car brand={car} />)}
</ul>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Quando esegui questo codice nel tuo create-react-app, funzionerà ma riceverai un avviso che non è stata fornita alcuna "chiave" per le voci dell'elenco.
Ottieni la certificazione!
ISCRIVITI A $95
Chiavi
Le chiavi consentono a React di tenere traccia degli elementi. In questo modo, se un elemento viene aggiornato o rimosso, solo quell'elemento verrà ridisegnato anziché l'intero elenco.
Le chiavi devono essere uniche per ogni fratello. Ma possono essere duplicati a livello globale.
In genere, la chiave dovrebbe essere un ID univoco assegnato a ciascun elemento. Come ultima risorsa, puoi utilizzare l'indice dell'array come chiave.
Esempio:
Ridimensioniamo il nostro esempio precedente per includere le chiavi:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car key={car.id} brand={car.brand} />)}
</ul>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));