Reactielijsten
In React render je lijsten met een soort lus.
De JavaScript map()-arraymethode is over het algemeen de voorkeursmethode.
Als je een opfriscursus nodig hebt over de map()methode, bekijk dan de
ES6-sectie .
Voorbeeld:
Laten we alle auto's uit onze garage renderen:
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'));
Wanneer u deze code uitvoert in uw create-react-app, zal deze werken, maar u ontvangt een waarschuwing dat er geen "sleutel" is opgegeven voor de lijstitems.
Gecertificeerd!
$95 INSCHRIJVEN
Sleutels
Met toetsen kan React elementen bijhouden. Op deze manier, als een item wordt bijgewerkt of verwijderd, wordt alleen dat item opnieuw weergegeven in plaats van de hele lijst.
Sleutels moeten uniek zijn voor elke broer of zus. Maar ze kunnen wereldwijd worden gedupliceerd.
Over het algemeen moet de sleutel een unieke ID zijn die aan elk item is toegewezen. Als laatste redmiddel kunt u de array-index als sleutel gebruiken.
Voorbeeld:
Laten we ons vorige voorbeeld refactoren om sleutels op te nemen:
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'));