當前位置:編程學習大全網 - 源碼下載 - 道具和反應的區別。孩子們在作出反應

道具和反應的區別。孩子們在作出反應

在React中,當涉及到組件嵌套時,在父組件中使用props.children來顯示所有子組件。如下所示:

函數ParentComponent(props){

返回(

& ltdiv & gt

{道具.兒童}

& lt/div & gt;

)

}

如果我想將父組件中的屬性傳遞給所有子組件,應該怎麽做?-可以通過使用React.Children的幫助方法來完成。

例如,將幾個無線電組合成壹個RadioGroup要求所有無線電都具有相同的name屬性值。可以這樣設計:Radio作為子組件,RadioGroup作為父組件,name的屬性值設置在RadioGroup的父組件中。

第壹個是子組件:

//子組件

功能單選按鈕(道具){

返回(

& lt標簽& gt

& ltinput type = " radio " value = { props . value } name = { props . name }/& gt;

{props.label}

& lt/label & gt;

)

}

然後是父組件,不僅需要顯示它的所有子組件,還需要給每個子組件分配name屬性和值://對於父組件,props是指父組件的道具?函數Render Children(props){//遍歷所有子組件,return react . Children . map(props . Children,child = > {

if (child.type === RadioOption)

return React.cloneElement(child,{

//將父組件的props.name賦給每個子組件。

名稱:道具.名稱

})

其他

返回孩子

})

}

//父組件

功能單選按鈕組(道具){

返回(

& ltdiv & gt

{renderChildren(props)}

& lt/div & gt;

)

}

函數App() {

返回(

& ltRadioGroup name="hello " >

& ltradio Option label = " Option 1 " value = " 1 "/>

& ltradio Option label = " Option 2 " value = " 2 "/>

& ltradio option label = " option 3 " value = " 3 "/>

& lt/radio group & gt;

)

}

導出默認應用程序

最重要的是,做出反應。Children.map讓我們可以更靈活地控制父組件的所有子組件。

  • 上一篇:怎麽看出js是nodejs還是javascript
  • 下一篇:想做個線上便利店,準備做個小程序,不知道取什麽名字好,求推薦
  • copyright 2024編程學習大全網