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.

Örnek çözümü göster

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

function App() {
  return (
    <Greeting name='Ayşe' />
  );
}

Kendini test et

Props kavramlarını eşleştir

props

Bileşen girdisi
{ name }

Destructuring
name

Prop adı
<Greeting name=...

Prop geçirme
name prop'una nasıl erişilir?
```
function Greeting({ name }) { ... }
```
- {name}
- props.name
- name()
- $name
Cevabı göster

{name} — Destructuring yapıldıktan sonra {name} ile erişilir.

Destructuring

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

Cevabı göster

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

Sıradaki ders: Çocuk bileşen

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler