react

children

function RadioOption(props) {
  return (
    <label>
      <input type="radio" value={props.value} name={props.name} />
      {props.label}
    </label>
  )
}

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>
  )
}

function Picture(props){

  return (<div>
    <img src={props.src}/>
    {props.children}
  </div>)
}


class Hello extends React.Component {
  render() {
  	return (
    		<div>
    		  <Picture src="https://avatars0.githubusercontent.com/u/10190366?s=88&v=4">
    		    <p>头像</p>
    		  </Picture>
    		</div>
    )

https://codesandbox.io/s/lx4ql6wy7z

contextApi