React Widget Renderer 2
Önceki yazımı okumak için : React Widget Render 1
Evet önceki yazımda bir componentleri dışardan gelen Json dosyası ile render eden Tab componentimizi yazmıştık ama bu componentimiz props iletmiyordu. Şimdi bunun props ileten halini yazalım.
ComponentService.js dosyamda şu değişiklikleri yapıyorum ;
import WishList from "../features/WhishList";import Login from "../features/Login";import Products from "../features/Products";export const MyComponentService = {login: Login,product: props => Products(props),wishlist: WishList};
Ec6 ile product key li componentimin props render ettiğini söylüyorum. App.js de bu componenti çağırırken de normal react componeti çağırırmış gibi Jsx formatında çağırmam gerekiyor.
const Component = MyComponentService[tab];...
return(
<div className="App"><Component products={products} /></div>)
const Component = İle önce hangi componentim seçili belirledim, ardından Burada yollamış olduğum products props’u ComponentService componentime gider ve oradan Product Componentime yollarım. Bir önceki dersimizde hazırladığımız method ise şu şekildeydi ;
<div className="App">{MyComponentService[tab]}</div>Tüm app.js kodlarım
Bir sonraki dersimizde Custom Hook yazarak. Run time de css ve templata mizi nasıl çekeriz onu tartışacağız.
Bu arada mediuma içerik yazmayı artık dahi iyi öğrendim. Kodları github gist yardımı ile eklemek çok kolaymış. 3. yazı bittikten sonra tekrar güncelleyeceğim son olarakta eğer github kodlara bakmak isterseniz buyrun efendim : https://github.com/abdullahsuhaisk/ReactWidgetsRender branchlarda dersleri bulabilirsiniz.
