猿问
下载APP

React中props.children和React.Children的区别

React中props.children和React.Children的区别 


回首忆惘然
浏览 323回答 1
1回答

拉风的咖菲猫

在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来。如下:function ParentComponent(props){return (<div>{props.children}</div>)}如果想把父组件中的属性传给所有的子组件,该怎么做呢?——使用React.Children帮助方法就可以做到比如,把几个Radio组合起来,合成一个RadioGroup,这就要求所有的Radio具有同样的name属性值。可以这样设计:把Radio看做子组件,RadioGroup看做父组件,name的属性值在RadioGroup这个父组件中设置首先是子组件://子组件function RadioOption(props) {return (<label><input type="radio" value={props.value} name={props.name} />{props.label}</label>)}然后是父组件,不仅需要把它所有的子组件显示出来,还需要为每个子组件赋上name属性和值://父组件用,props是指父组件的props&nbsp;function renderChildren(props) {//遍历所有子组件return React.Children.map(props.children, child => {if (child.type === RadioOption)return React.cloneElement(child, {//把父组件的props.name赋值给每个子组件name: props.name})elsereturn child})}//父组件function RadioGroup(props) {return (<div>{renderChildren(props)}</div>)}function App() {return (<RadioGroup name="hello"><RadioOption label="选项一" value="1" /><RadioOption label="选项二" value="2" /><RadioOption label="选项三" value="3" /></RadioGroup>)}export default App以上,React.Children.map让我们对父组件的所有子组件又更灵活的控制
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答