Birden çok props
- React Native kursu
- Başlangıç
- Ders 16/116
- 5 dk
Birden çok prop geçmeyi öğrenirsin.
Birden çok props
Bir bileşen birden fazla prop alabilir. Destructuring sırasında prop'lar virgülle ayrılır: function User({ name, age }) { ... }.
Çağrı sırasında her prop ayrı bir öznitelik olarak yazılır: <User name='Ayşe' age='25' />. Özniteliklerin sırası önemli değildir.
Bu sayede tek bir bileşen zengin verilerle özelleştirilir; örneğin bir kullanıcı kartı hem isim hem yaş gösterebilir.
İki prop kullanma
Birden çok prop alabilen bir bileşen, daha zengin içerik gösterebilir. Örneğin bir User bileşeni hem isim hem yaş gösterebilir: function User({ name, age }) { return <Text>{name}, {age}</Text>; }.
Çağrı: <User name='Ayşe' age='25' />. Bileşen, her iki değeri de alır ve JSX içinde kullanır.
Bu kalıp, gerçek uygulamalarda sıkça karşılaşılan bir yapıdır.
Uygulama User bileşeni yaz
Bir User bileşeni yaz; name ve age proplarını destructuring ile alsın ve <Text>{name}, {age}</Text> döndürsün. App içinde <User name='Ayşe' age='25' /> çağrısı yapsın.
Başlangıç kodu
// User bileşenini name ve age ile yaz
// App içinde çağır
function App() {
return null;
}Örnek çözüm
function User({ name, age }) {
return (
<Text>{name}, {age}</Text>
);
}
function App() {
return (
<User name='Ayşe' age='25' />
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 İki prop nasıl geçirilir?
- <User name='Ayşe' age='25'>
- <User name='Ayşe', age='25' />
- <User name='Ayşe' age='25' /> Doğru cevap
- <User (name='Ayşe') (age='25') />
Açıklama: Öznitelikler boşlukla ayrılır, virgül gerekmez.
2 İki prop destructuring
function User(____) { return <Text>{name}, {age}</Text>; }function User({ name, age }) { return <Text>{name}, {age}</Text>; }Açıklama: Prop'lar virgülle ayrılır.
3 İki prop kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
name |
İsim |
age |
Yaş |
{ name, age } |
İki prop |
<User ... /> |
Çağrı |