Compound kelime anlamı olarak bileşik demek ve react ile bir compound component oluşturduğumuzda aslında bir grup componenti bir araya getiriyoruz. Ancak diğer componentlerden farklı olarak, bu component grubundaki componentler damacana ile pompası gibi ayrı ayrı bir işe yaramazken, bir araya gelince çok işe yarayabiliyorlar.
Bir örnek üzerinden gidersek daha anlaşılır olacaktır. Diyelim ki aşağıdaki gibi basit bir login formunuz var.
Beklentimiz bu login formunu çağırdığımızda kendi içindeki state ile işlemleri yöneterek, kullanıcı submit işlemi yaptığında bize girilen değerleri göndermesi.
Mantık olarak çok basit bir form, içerisindeki state'de 3 alan tutması yeterli (email, password, hasErrors) ve kullanıcı bu submit ettiğinde bu bilgileri dışarı aktarması lazım. Yani özetle şu şekilde kullanıyor olalım.
<LoginForm onSubmit={console.log} />
Kullanıcı formu doldurup submit tuşuna basınca console logda bu bilgiler görülecek, bi alanı boş bıraktı ise error mesajı görüntülenecek.
İşler buraya kodar çok kolay ve istediğimiz gibi gitti ve bu component'i kullanmaya başladık. Sonra istendi ki bu form aynı zamanda headerda da olacak ve orada yatay şekilde olacak. İyi güzel sıkıntı yok bir properti eklerim "vertical" adında, ve bu değer true ise LoginForm componenti içinde yatay yerleştiririm. Sıkıntı yok!
Kısa bir süre sonra bir istek daha geldi, bu formu ebesinin örekesinde de kullanacaz ama bu sefer button en tepede ve error mesajı email ve password alanları arasında olacak. Patron çıldırdı.
İşte tam bu gibi durumda Compound Component yaklaşımını kullanmak hayat kurtarabilir.
Aşağıda vertical ve horizontal formları görüyorsunuz. Bileşenleri istediğimiz şekilde yerleştirirken logic yani bu örnek için form state yönetimi hiç değişmiyor.
Detaylı bilgi için koda bakalım lütfen... https://github.com/melihkorkmaz/react-compound-component/blob/master/src/LoginForm.js