Children prop
- React kursu
- Başlangıç
- Ders 19/84
- 4 dk
children prop'unun bileşen içeriğini aktardığını öğrenirsin.
Children prop
children özel bir prop'tur. Bir bileşeni çift etiketle çağırınca aradaki içerik children olarak geçer: <Card><p>Merhaba</p></Card> içindeki <p>, Card'ın children'ıdır.
Card bunu function Card({ '{ children }' }) { return <div>{children}</div>; } ile alır ve kendi kapsayıcısına yerleştirir.
Bu, sarıcı bileşenler (wrapper components) için idealdir: Card neyi içine aldığını bilmez, sadece gösterir.
Sarıcı deseni
Children prop'un en yaygın kullanımı sarıcı bileşenlerdir. Card, Modal, Layout gibi bileşenler içeriklerini dışarıdan alır.
Bu desen, bileşenin ne içereceğini değil, nasıl görüneceğini tanımlamanı sağlar. İçerik bağımsızdır, kap ise yeniden kullanılabilir.
Sarıcılar ebeveyn-çocuk ayrımı yapar: ebeveyn çocuğu children ile gösterir, çocuk kendi içeriğini yönetir.
Uygulama Card children ile
Aşağıdaki iskeleti tamamla. Card adında bir bileşen yaz; ({ '{ children }' }) parametresi alsın ve <div className="card">{children}</div> döndürsün. Dışa aktarmayı unutma.
Başlangıç kodu
// Card bileşenini buraya yazÖrnek çözüm
function Card({ children }) {
return <div className="card">{children}</div>;
}
export default Card;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 children prop ne zaman gelir?
- Props verilince
- Bileşen çift etiketle çağrılınca Doğru cevap
- Bileşen self-closing olunca
- State değişince
Açıklama: Çift etiketli çağrıda içerik children olur.
2 children sözdizimi
Sarıcı bileşen ____ ile children alır.Sarıcı bileşen { children } ile children alır.Açıklama: { children } destructuring ile alınır.
3 children kullanımını eşleştir
| Kavram | Anlamı |
|---|---|
Card |
Kapsayıcı |
children |
İçerik |
div |
Çerçeve |
export |
Dışa aktar |