函數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讓我們可以更靈活地控制父組件的所有子組件。