Hoc yaklaşım {children} Elemetin e Props Göndermek

Sorun ?

Bir hoc yazdığımızı düşünelim basit bir hoc mesela layout gibi. Arka plan rengini render ettiği çocuklarına ilettiğini düşünelim. Peki props da iletmek istersek bu işlem nasıl olmalı ? Bu komposizyonda baba componentimiz çocuklarını bilemez ve tanımaz. Dolayısı ile props da gönderemeyiz. Ama göndermemiz lazım. Şimdi adım adım sorunu inceleyelim.Ardından reactClone element ile sorunumuzu çözelim.

Çokça basit bir layout wrapper i olarak bunu düşünün. Arka planı mavi yapıp içine gelecek componentleri ortalayan bir hoc component yaptık. Mesela isteklerimizden birisi hoc içindeki componente (child) method tanımlayıp parent componentimin rengini değiştirmek istediğimi var sayalım.

<props.children setColor={setColor}> {children} </props.children>

return’nun içindeki yapı tamamiyle yanlış.Bize böyle bir yapı lazım sadece. Burada kurtarıcımız. React.cloneElement gelecek. Şimdi şöyleki ;

React.cloneElement(
element,
[props],
[…children]
)

İlk parametre olarak component alıyor. Diğer parametre ise obje olarak propslarım, bir state yada method olabilir.

Hoc componentimde bütün çocuklarında render edilebilmesi için React.Children.map methodunu kullanacağım. Buradaki map Javascript map ı değil. React Children dan gelen map;İçine component objesi alıyor ve onu dönüyor. Uzun lafın kısası ;

const children = React.Children.map(props.children, (child, index) => {

return React.cloneElement(child, {

index,

setColor

});

});

Layout umun son versiyonu içinde bazı data bilgilerinide adını bilmediğim çocuk componentime göndere biliyorum.

Peki gerçek bir projede bu ihtiyac nerden çıktı ? Şimdi şöyle ki daha önceki yazılarımı okuyanlar bilir. Interaktif bir video player geliştiriyorum ve bu video player componentlerini Json ile dışarıdan alıyor. Aslında componentlerim içeride tanımlı, yanlızca hangi componentlerin render edileceği hangilerinin render edilmeyeceğine akış şekline Jsondan gelen veri karar veriyor. İhticımız video playerin alt tarafında kalan controlbardan geldi, her bir müşteri control barını özelliştirebilir. Controlbar daki bu componentlerin grapql ile client tarafta ilişki kurması gerekiyor, Çünkü tetiklemeleri var. Aslında bu bundan dolayı gelişti. Client object ini child ları bilmeden iletebilmem gerekiyordu. En altaki yazıda olayın çıkış noktası, ben sadece kendi yaklaşımı yazmış ve biraz Türkçeleştirmiş oldum. Teşekkürler…

Çalışan örnek : https://codesandbox.io/s/restless-fog-r715j

GitHub: https://github.com/abdullahsuhaisk

https://codepen.io/Yuschick/post/react-passing-state-to-props-children-in-jsx