Bileşene veri ekleme ve bağlama
Ürün kartı bileşenine veri ekleme ve bağlama.
Geliştiriciler için
Bileşene veri eklemek, React'te bir component'e prop tanımlamaya karşılık gelir. Burada product verisi tanımlayarak bileşenin dışarıdan bir ürün verisi beklediğini bildiriyorsunuz:
interface ProductCardProps {
product: Product;
}Bileşeni kullandığınız yerde bu prop'a değer bağlamak, JSX'te <ProductCard product={productListItem} /> yazmakla aynı mantıktadır.
Bileşene veri ekleme
Ürün kartı bileşenine çift tıklayarak detayına gidin. Katmanlar kısmından bileşen içindeki herhangi bir element'i seçin ve sağ kısımdaki panelden Veri Ekle kısmına tıklayın. Açılan modaldan Product veri tipini seçerek ilerleyin.
Veri ekle modalından aşağıdaki bilgileri düzenleyebilirsiniz:
- Görünen İsim
- Değişken Adı
- Açıklama
- Varsayılan
- Grup
Bilgileri girdikten sonra Kaydet'e basın. Artık bileşenin kendine ait bir product verisi tanımlanmış olur.
Bileşen içindeki elemente veri bağlama
Bileşen detayındayken yazı element'ine sağ tıklayarak Veri Bağla kısmından product > name verisini seçin. Bu şekilde yazı elementine ürün adını bağlamış olursunuz.
Yeniden kullanılabilir bileşen
Oluşturduğunuz bu bileşeni artık dilediğiniz bölümde kullanabilirsiniz. Yapmanız gereken tek işlem, kullandığınız yerde bileşene bir product verisi bağlamak olacaktır.
Listeden gelen veriyi bileşene bağlama
ProductList item detayına geri dönün ve eklediğiniz ürün kartı bileşenini seçin. Sağ kısımdaki Data sekmesi altından product verisine listeden gelen productListItem değerini bağlayın.
productListItem değeri zaten Product tipinde olduğu için bileşeniniz bu veriye bağlı olarak çalışmaya başlayacaktır. Liste içindeki her bir item, kendi ürün verisini otomatik olarak bileşene aktaracaktır.