Varsayılan props
- React kursu
- Başlangıç
- Ders 20/84
- 4 dk
Bir prop gelmediğinde varsayılan değer kullanmayı öğrenirsin.
Varsayılan props
Bazen bir prop gelmeyebilir. Bu durumda bileşenin bozulmaması için varsayılan değer verirsin. Destructuring içinde = işareti ile yazılır: ({ '{ name = "Misafir" }' }).
Bu yazım JavaScript'in varsayılan parametre özelliğidir. name prop'u gelmezse veya undefined ise otomatik olarak "Misafir" kullanılır.
Varsayılan değerler, bileşenin esnek olmasını sağlar: zorunlu olmayan proplar için yedek bir davranış tanımlar.
Varsayılan props faydaları
Varsayılan props bileşenin dayanıklı olmasını sağlar. Örneğin bir Avatar bileşeni name prop'u olmadan çağrılırsa, varsayılan olarak "Misafir" gösterir.
Bu yaklaşım API tasarımında da yaygındır: opsiyonel proplar için varsayılan belirlemek, çağıran tarafın yükünü azaltır.
Birden fazla prop için de aynı yazım çalışır: ({ '{ name = "Misafir", role = "Kullanıcı" }' }).
Uygulama Avatar varsayılan isim
Aşağıdaki iskeleti tamamla. Avatar adında bir bileşen yaz; ({ '{ name = "Misafir" }' }) 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 = "Misafir" }) {
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 Varsayılan prop ne zaman kullanılır?
- Çizim hatasında
- Prop her geldiğinde
- Prop gelmediğinde Doğru cevap
- State değişince
Açıklama: Varsayılan prop, prop gelmediğinde devreye girer.
2 Varsayılan değer yazımı
name prop'unun varsayılanı ____ olur.name prop'unun varsayılanı "Misafir" olur.Açıklama: "Misafir" bir varsayılan değerdir.
3 Varsayılan props örneklerini eşleştir
| Kavram | Anlamı |
|---|---|
name = "Misafir" |
Tek varsayılan |
role = "Kullanıcı" |
İkinci varsayılan |
{ name } |
Zorunlu prop |
props |
Tüm nesne |