Diziden bileşen
- React kursu
- Başlangıç
- Ders 29/84
- 4 dk
Bir veri dizisinden özel bileşenler üretmeyi öğrenirsin.
Diziden bileşen
map içinde sadece JSX etiketi değil, kendi bileşenini de çağırabilirsin. Böylece her öğe zengin bir kart, satır veya hücre olur.
Örnek: {items.map(i => <Product item={i} />)}. Burada Product senin bileşenin; veriyi item prop'uyla alır.
Bileşen adı büyük harfle başladığı için React onu etiket değil bileşen sayar.
Props ile veri akışı
Listeyi bir alt bileşene böldüğünde, veriyi prop olarak geçersin. Üst bileşen map'i çağırır; alt bileşen tek bir öğeyi çizer.
Bu ayırma, kodun okunmasını kolaylaştırır ve alt bileşeni başka yerlerde yeniden kullanmana izin verir. Her alt bileşen tek bir sorumluluk taşır.
key her zaman en dıştaki çağrıya yazılır: <Product key={i.id} item={i} />.
Uygulama ProductList bileşeni
Aşağıdaki iskeleti tamamla. ProductList bileşeni yaz; items dizisinde her öğenin id ve name alanı var. .map() ile her öğeyi <li key={item.id}><Product item={item} /></li> yap. Dışa aktar.
Başlangıç kodu
// ProductList bileşenini buraya tanımlaÖrnek çözüm
function ProductList() {
const items = [{ id: 1, name: "Kalem" }, { id: 2, name: "Defter" }];
return <ul>{items.map(item => <li key={item.id}><Product item={item} /></li>)}</ul>;
}
export default ProductList;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi bileşen olarak çağrılır?
Component names always start with a capital letter.- <div>
- <li>
- <product>
- <Product> Doğru cevap
Açıklama: Büyük harfle başladığı için bileşen sayılır.
2 Diziden bileşen: eksik parçayı tamamla
{items.map(item => <Product item={____} />)}{items.map(item => <Product item={item} />)}Açıklama: Product'a item prop'unu geçtin.
3 Diziden bileşen: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Bileşen adı |
Büyük harf |
Prop adı |
Küçük harf |
children |
İçerik |
map |
Döngü kurar |