Tepki Listeleri
React'te listeleri bir tür döngü ile oluşturacaksınız.
JavaScript map()dizi yöntemi genellikle tercih edilen yöntemdir.
map()Yöntem
hakkında bilgi tazelemeye ihtiyacınız varsa , ES6 bölümüne bakın .
Örnek:
Garajımızdaki tüm arabaları render edelim:
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'));
Bu kodu kendi dosyanızda çalıştırdığınızda create-react-appçalışacaktır ancak liste öğeleri için sağlanan bir "anahtar" olmadığına dair bir uyarı alacaksınız.
Sertikalı olmak!
95 $ KAYIT
Anahtarlar
Anahtarlar, React'in öğeleri takip etmesine izin verir. Bu şekilde, bir öğe güncellenir veya kaldırılırsa, tüm liste yerine yalnızca o öğe yeniden oluşturulacaktır.
Anahtarların her bir kardeş için benzersiz olması gerekir. Ancak küresel olarak çoğaltılabilirler.
Genellikle anahtar, her öğeye atanan benzersiz bir kimlik olmalıdır. Son çare olarak dizi dizinini anahtar olarak kullanabilirsiniz.
Örnek:
Anahtarları dahil etmek için önceki örneğimizi yeniden düzenleyelim:
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'));