Çocuk bileşen
- React Native kursu
- Başlangıç
- Ders 15/116
- 5 dk
children prop ile çocuk bileşenleri öğrenirsin.
children prop'u
children, React'te özel bir prop'tür. Bir bileşenin açılış ve kapanış etiketleri arasına yazılan içeriği temsil eder. Bu, sarmalayıcı bileşenler oluşturmayı kolaylaştırır.
Örneğin: function Card({ children }) { return <View>{children}</View>; }. Burada Card, kendisine verilen tüm içeriği bir View içine sarar.
Kullanımı: <Card><Text>Merhaba</Text></Card>. Burada <Text>Merhaba</Text> children olarak Card'a geçer.
Sarmalayıcı bileşen
children prop'u, sarmalayıcı bileşenler oluşturmanın temelidir. Sarmalayıcı, içine aldığı içeriği düzenler, stiller veya başka bileşenlerle sarar.
Örneğin bir Card bileşeni, içeriği bir kutu içinde göstermek için kullanılabilir. İçine metin, görsel veya başka bileşenler konabilir.
Bu sayede tek bir Card tanımıyla sonsuz farklı içerik gösterilir; bu, bileşen yaklaşımının gücüdür.
Uygulama Card bileşeni yaz
Bir Card bileşeni yaz; children prop'unu destructuring ile alsın ve <View>{children}</View> döndürsün.
Başlangıç kodu
// Card bileşenini children ile yaz
function Card() {
return null;
}Örnek çözüm
function Card({ children }) {
return (
<View>
{children}
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 children destructuring
function Card(____) { return <View>{children}</View>; }function Card({ children }) { return <View>{children}</View>; }Açıklama: children, süslü parantez ile ayrıştırılır.
2 children kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
children |
Özel prop |
<Card>...</Card> |
İçerik |
{children} |
Gömme |
<View> |
Sarmalayıcı |
3 Card bileşenine children nasıl geçirilir?
- <Card children='Merhaba' />
- <Card>Merhaba</Card> Doğru cevap
- <Card name='Merhaba' />
- <Card>{'Merhaba'}</Card>
Açıklama: Etiketler arasına yazılan içerik children olur.