CodeBlanks Logo Icon CodeBlanks

Props

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

App.js
// Greeting bileşenini name prop'u ile yaz
// App içinde name='Ayşe' ile çağır
function App() {
  return null;
}

Örnek çözüm

App.js
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?

App.js
function Greeting({ name }) { ... }
  • {name} Doğru cevap
  • props.name
  • name()
  • $name

Açıklama: Destructuring yapıldıktan sonra {name} ile erişilir.

3 Destructuring

Soru
function Greeting(____) { return <Text>Merhaba, {name}</Text>; }
Cevap
function Greeting({ name }) { return <Text>Merhaba, {name}</Text>; }

Açıklama: { name } ile destructuring yapılır.

Başlangıç bölümündeki tüm dersler