元件巢狀
阿新 • • 發佈：2021-08-10
importReact,{Component}from'react'
classHeaderextendsComponent{
render(){
return(
<div>我是Header元件</div>
)
}
}
classBannerextendsComponent{ render(){ return( <div>我是Banner元件</div> ) } }
classProductListextendsComponent{ render(){ return( <div> <ul> <li>商品列表1</li> <li>商品列表2</li> <li>商品列表3</li> </ul> </div> ) } }
classMainextendsComponent{ render(){ return( <div> <Banner/> <ProductList/> </div> ) } }
classFooterextendsComponent{ render(){ return( <div>我是Footer元件</div> ) } }
exportdefaultclassAppextendsComponent{
constructor(){ super(); this.state={ } } render(){ return( <div> <Header/> <Main/> <Footer/> </div> ) }
} 我是Eric,手機號是13522679763
classBannerextendsComponent{ render(){ return( <div>我是Banner元件</div> ) } }
classProductListextendsComponent{ render(){ return( <div> <ul> <li>商品列表1</li> <li>商品列表2</li> <li>商品列表3</li> </ul> </div> ) } }
classMainextendsComponent{ render(){ return( <div> <Banner/> <ProductList/> </div> ) } }
classFooterextendsComponent{ render(){ return( <div>我是Footer元件</div> ) } }
exportdefaultclassAppextendsComponent{
constructor(){ super(); this.state={ } } render(){ return( <div> <Header/> <Main/> <Footer/> </div> ) }
} 我是Eric,手機號是13522679763