Props okuma

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.

Örnek çözümü göster

function Button({ label }) {
  return <button>{label}</button>;
}

export default Button;

Kendini test et

Destructuring sözdizimi nedir?
- (name)
- props.name
- [name]
- { name }
Cevabı göster

{ name } — { name } destructuring yazımıdır.

İki prop destructuring

İki prop: ____ ve role.

Cevabı göster

İki prop: name ve role.

Destructuring biçimlerini eşleştir

{ name }

Tek prop
{ name, role }

İki prop
{ ...rest }

Geri kalan
props

Tüm nesne

Sıradaki ders: Children prop

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler