Props nedir?
- React kursu
- Başlangıç
- Ders 17/84
- 4 dk
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.
Başlangıç kodu
// Avatar bileşenini buraya yazÖrnek çözüm
function Avatar({ name }) {
return <p>{name}</p>;
}
export default Avatar;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Props hangi yönde akar?
- Ebeveynden çocuğa Doğru cevap
- Çocuktan ebeveyne
- İki yönlü
- Rastgele
Açıklama: Props ebeveynden çocuğa akar.
2 Props yazımı
Avatar'a ____ prop'u gönderilir.Avatar'a name prop'u gönderilir.Açıklama: name Avatar'a gönderilen prop'tür.
3 Props kullanımını eşleştir
| Kavram | Anlamı |
|---|---|
name="Ayşe" |
Prop gönderme |
props.name |
Nesne erişimi |
{ name } |
Destructuring |
props |
Parametre |