Props
- React Native kursu
- Başlangıç
- Ders 14/116
- 5 dk
Props ile bileşene veri geçmeyi öğrenirsin.
Props nedir?
Props (property'nin kısaltması), bir bileşene dışarıdan geçirilen verilerdir. Bileşeni özelleştirmeni sağlar. Aynı bileşeni farklı verilerle çağırabilirsin.
Bir bileşen props'u bir nesne olarak alır. Genellikle destructuring ile ayrıştırılır: function Greeting({ name }) { ... }. Burada name, geçirilen prop'un adıdır.
Çağrı sırasında prop değeri verilir: <Greeting name='Ayşe' />. Bileşen içinde {name} ile bu değere erişilir.
Prop geçirme ve kullanma
Bir prop'u bileşene geçirmek için JSX etiketine öznitelik gibi yazarsın: <Greeting name='Ayşe' />. Burada name özniteliğin adı, 'Ayşe' ise değeridir.
Bileşen tanımında bu prop'u destructuring ile alırsın: function Greeting({ name }) { return <Text>Merhaba, {name}</Text>; }.
Bu sayede tek bir Greeting bileşeni, farklı isimler için tekrar tekrar kullanılabilir.
Uygulama Props ile Greeting
Bir Greeting bileşeni yaz; name prop'unu destructuring ile alsın ve <Text>Merhaba, {name}</Text> döndürsün. App içinde <Greeting name='Ayşe' /> çağrısı yapsın.
Başlangıç kodu
// Greeting bileşenini name prop'u ile yaz
// App içinde name='Ayşe' ile çağır
function App() {
return null;
}Örnek çözüm
function Greeting({ name }) {
return (
<Text>Merhaba, {name}</Text>
);
}
function App() {
return (
<Greeting name='Ayşe' />
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Props kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
props |
Bileşen girdisi |
{ name } |
Destructuring |
name |
Prop adı |
<Greeting name=... |
Prop geçirme |
2 name prop'una nasıl erişilir?
function Greeting({ name }) { ... }- {name} Doğru cevap
- props.name
- name()
- $name
Açıklama: Destructuring yapıldıktan sonra {name} ile erişilir.
3 Destructuring
function Greeting(____) { return <Text>Merhaba, {name}</Text>; }
function Greeting({ name }) { return <Text>Merhaba, {name}</Text>; }
Açıklama: { name } ile destructuring yapılır.