React HighOrderComponent Nedir ?

  HighOrderComponent nedir ?

Aslında buna bir componentin başka bir componenti sarması da diyebiliriz.

Örnek yapalım. Bir component yazalım ve bu component Contact komponentini sarmalasın. Contact komponentini saran componentimin adı rainbow olsun. Bu rainbow componentinde Boostrap classlarını kullanarak en üst div oluşturup renklendirme yapalım.

asdasd

Rainbow komponentim parametre olarak bir komponent alır. Daha sonra renk dizim var. Bu dizideki elemanların boostrapdan gelen renk classları 6 eleman içinden rastgele bir tanesini seçiyorum. Ve bu sectiğimi <div className="text-primary"> örneğinde olacağı gibi biçimlendiriyorum. Method base komponentimi return methoda gelen komponent parametremin props unu alır. Ve en üste yeni bir renk classı atar. Daha sonra düşük sıralı komponentim çağırılır ve parametre olarak gelen props un bir kopyası set edilir. Artık bu Rainbow komponentim ile sarmalan her bir komponent değişen renklere sahip olur.
Burada bir componentin nasıl sarmalanması gerektiği gösterilmiştir.

Yorumlar

Bu blogdaki popüler yayınlar

Laravel & React 1

React ile Kişisel Blog Sayfası Oluşturma 1

Github' a proje atma (Visual Studio Code ile)