首頁(yè) 猿問(wèn) 如何構(gòu)建可用于嵌套的React組件？

如何構(gòu)建可用于嵌套的React組件？

JavaScript

紫衣仙女 2019-05-13 10:28:25

使用antd的時(shí)候，用到Modal組件，如此使用：return(...)好神奇！組件還可以包住其他組件。畢竟以往我們做的組件都是類似這樣單標(biāo)簽使用的：那么，如何構(gòu)建，才能讓組件在使用時(shí)候可以嵌套其他內(nèi)容（包括其他組件），什么原理？找了一些如何寫(xiě)組件的博客文章，都沒(méi)有講到這些，想去antd看Modal的源碼，然而它引用了別的組件。實(shí)在看不出來(lái)。謝謝！

查看完整描述

2 回答

ABOUTYOU

TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊

classMainextendsComponent{constructor(props){super(props);}render(){return({this.props.children}
)}}

反對(duì) 回復(fù) 2019-05-13

函數(shù)式編程

TA貢獻(xiàn)1807條經(jīng)驗(yàn) 獲得超9個(gè)贊

...
在這段代碼中，只有Modal是父元素，p是子元素。我這里不想用父子組件來(lái)解釋，因?yàn)樗麄儽举|(zhì)是React元素。實(shí)際上你在這里聲明的是Modal元素，而在其中嵌套p這一寫(xiě)法可以看作是JSX的語(yǔ)法糖，用于更好地表現(xiàn)層次關(guān)系，本質(zhì)上等同于：...
)}/>所以Modal的render方法并不會(huì)自動(dòng)展現(xiàn)p元素，需要手動(dòng)將{this.props.children}寫(xiě)在對(duì)應(yīng)位置另外關(guān)于React的常見(jiàn)使用模式，可以閱讀官方文檔