Birden çok props

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.

Örnek çözümü göster

function User({ name, age }) {
  return (
    <Text>{name}, {age}</Text>
  );
}

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

Kendini test et

İki prop nasıl geçirilir?
- <User name='Ayşe' age='25'>
- <User name='Ayşe', age='25' />
- <User name='Ayşe' age='25' />
- <User (name='Ayşe') (age='25') />
Cevabı göster

<User name='Ayşe' age='25' /> — Öznitelikler boşlukla ayrılır, virgül gerekmez.

İki prop destructuring

function User(____) { return <Text>{name}, {age}</Text>; }

Cevabı göster

function User({ name, age }) { return <Text>{name}, {age}</Text>; }

İki prop kavramlarını eşleştir

name

İsim
age

Yaş
{ name, age }

İki prop
<User ... />

Çağrı

Sıradaki ders: Bileşen yeniden kullanım

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler