Props okuma
- React kursu
- Başlangıç
- Ders 18/84
- 4 dk
Props nesnesini destructuring ile almayı öğrenirsin.
Props okuma
Props nesnesini destructuring ile açmak React'te yaygın bir uygulamadır. function Button({ label }) { return <button>{label}</button>; } satırı, props.label yerine doğrudan label kullanmanı sağlar.
Birden fazla prop varsa hepsini virgülle ayırırsın: ({ '{ label, onClick, disabled }' }). Bu, fonksiyon imzasında hangi veriyi beklediğini net gösterir.
Destructuring aynı zamanda hangi props'un kullanıldığını belgelemenin bir yoludur: fonksiyona bakınca bileşenin hangi verilere ihtiyaç duyduğunu hemen görürsün.
Destructuring faydası
Destructuring's en büyük faydası okunabilirliktir. props.name, props.role, props.city yazmak yerine name, role, city yazarsın.
İkinci fayda ise bileşenin bağımlılıklarını göstermesidir. ({ '{ name, role }' }) imzası, bu bileşenin yalnızca bu iki veriye ihtiyaç duyduğunu söyler.
Destructuring'i props parametresinde kullanmak React topluluğunda standart bir uygulamadır.
Uygulama Button props
Aşağıdaki iskeleti tamamla. Button adında bir bileşen yaz; ({ '{ label }' }) parametresi alsın ve <button>{label}</button> döndürsün. Dışa aktarmayı unutma.
Başlangıç kodu
// Button bileşenini buraya yazÖrnek çözüm
function Button({ label }) {
return <button>{label}</button>;
}
export default Button;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Destructuring sözdizimi nedir?
- (name)
- props.name
- [name]
- { name } Doğru cevap
Açıklama: { name } destructuring yazımıdır.
2 İki prop destructuring
İki prop: ____ ve role.İki prop: name ve role.Açıklama: name ve role iki prop'tür.
3 Destructuring biçimlerini eşleştir
| Kavram | Anlamı |
|---|---|
{ name } |
Tek prop |
{ name, role } |
İki prop |
{ ...rest } |
Geri kalan |
props |
Tüm nesne |