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

在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
function renderChildren(props) {
    
  //遍历全部子组件
  return React.Children.map(props.children, child => {
    if (child.type === RadioOption)
      return React.cloneElement(child, {
        //把父组件的props.name赋值给每一个子组件
        name: props.name
      })
    else
      return 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让咱们对父组件的全部子组件又更灵活的控制。

项目地址：https://github.com/darrenji/ReactNestedComponentExample