Props nedir?

Props'un bileşenlere dışarıdan veri aktarmanın yolu olduğunu öğrenirsin.

Props nedir?

Props, bir bileşene dışarıdan veri aktarmanın yoludur. HTML özniteliklerine benzer: <Avatar name="Ayşe" /> yazınca name prop'u Avatar bileşenine gönderilir.

Bileşen, props'u bir nesne olarak alır: function Avatar(props) { return <p>{props.name}</p>; }. Bu nesne okunur ama asla değiştirilmez.

Props'un tek yönü vardır: ebeveynden çocuğa akar. Çocuk prop'u değiştiremez; bu yöntem React'in öngörülebilir kalmasını sağlar.

Props okuma

Bileşen props'u bir parametre olarak alır: function Avatar(props) { ... }. İçindeki değerlere nokta ile ulaşırsın: props.name, props.role.

Daha temiz yazım için destructuring kullanılır: function Avatar({ name, role }) { ... }. Bu, props.name yerine doğrudan name yazmanı sağlar.

Destructuring, props'u okumayı kısa ve net hale getirir. Bu yüzden React kodlarında yaygındır.

Uygulama Props ile Avatar

Aşağıdaki iskeleti tamamla. Avatar adında bir bileşen yaz; ({ '{ name }' }) parametresi alsın ve <p>{name}</p> döndürsün. Dışa aktarmayı unutma.

Örnek çözümü göster

function Avatar({ name }) {
  return <p>{name}</p>;
}

export default Avatar;

Kendini test et

Props hangi yönde akar?
- Ebeveynden çocuğa
- Çocuktan ebeveyne
- İki yönlü
- Rastgele
Cevabı göster

Ebeveynden çocuğa — Props ebeveynden çocuğa akar.

Props yazımı

Avatar'a ____ prop'u gönderilir.

Cevabı göster

Avatar'a name prop'u gönderilir.

Props kullanımını eşleştir

name="Ayşe"

Prop gönderme
props.name

Nesne erişimi
{ name }

Destructuring
props

Parametre

Sıradaki ders: Props okuma

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler