Özet - Bileşenler

Props, children ve yeniden kullanımı birleştirerek bir kart bileşeni yazarsın.

Özet - Bileşenler

Bu grupta fonksiyonel bileşenleri, props'u, children prop'unu, birden çok prop almayı ve bileşen yeniden kullanımını öğrendin.

Artık bir bileşeni farklı proplarla çağırabilir, sarmalayıcı bileşenler yazabilir ve aynı bileşeni birçok yerde kullanabilirsin. Bunlar gerçek uygulamaların temel taşlarıdır.

Şimdi tüm bu kavramları tek bir uygulamada birleştirelim.

Uygulama Props ile bileşen

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' />
  );
}

Uygulama İki prop ve yeniden kullanım

Bir User bileşeni yaz; name ve age proplarını destructuring ile alsın, <Text>{name} - {age}</Text> döndürsün. App içinde <View> içinde iki kez çağrı yapsın: <User name='Ayşe' age='25' /> ve <User name='Alex' age='30' />.

Örnek çözümü göster

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

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

Kendini test et

children prop ne işe yarar?
- Etiketler arası içeriği taşır
- Bileşene isim verir
- Stil tanımlar
- Bileşeni gizler
Cevabı göster

Etiketler arası içeriği taşır — children, açılış ve kapanış arasındaki içeriği verir.
Bileşen kavramlarını eşleştir

function

Tanım
{ name }

Destructuring
children

İçerik prop
<User ... />

Çağrı

Sıradaki ders: Proje tasarımı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler