Özet - Props

Props kullanarak yeniden kullanılabilir bir buton bileşeni yazarsın.

Özet - Props

Bu grupta props'un ne olduğunu, nasıl okunduğunu, children prop'unu ve varsayılan değerleri öğrendin. Şimdi bunları birleştirme zamanı.

Akış: bileşene props nesnesi veya destructuring ile değer gönderirsin, children ile içerik aktarırsın, eksik proplar için varsayılan verirsin. Böylece esnek ve yeniden kullanılabilir bileşenler yazarsın.

Bir sonraki adımda props kullanarak yeniden kullanılabilir bir buton bileşeni yazacaksın.

Uygulama Yeniden kullanılabilir buton

Aşağıdaki iskeleti tamamla. Button adında bir bileşen yaz; ({ '{ label = "Gönder" }' }) parametresi alsın ve <button className="btn">{label}</button> döndürsün. Dışa aktarmayı unutma.

Örnek çözümü göster

function Button({ label = "Gönder" }) {
  return <button className="btn">{label}</button>;
}

export default Button;

Kendini test et

Destructuring ne işe yarar?
- Çizim yapar
- State saklar
- DOM günceller
- Props'u kısa okur
Cevabı göster

Props'u kısa okur — Destructuring props'u kısa okur.
Props kavramlarını eşleştir

props

Veri akışı
destructuring

Kısa okuma
children

İçerik
default

Yedek değer

Sıradaki ders: Koşullu render nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler