比如想实现 RadioGroup 和 Radio,想把 RadioGroup中的name属性传给子组件。 在RadioGroup中,利用 React.Children 来传递。

<RadioGroup name="mvvm">
    <Radio>vue</Radio>
    <Radio>react</Radio>
</RadioGroup>

Bad:

const RadioGroup = (props) => {
  return React.Children.map(props.children, child=>{
      // 不能直接修改
    child.name = props.name;
  });
}

Good:

const RadioGroup = (props) => {
  return React.Children.map(props.children, child=>{
      // 必须先clone,在传额外的属性
    return React.cloneElement(child, {name:props.name});
  });
}

Bad:

const Radio = (props) => {
  return (
    <label>
        {/*其中props包括children属性,不是合法的input属性,会报错*/}
        {/*https://reactjs.org/warnings/unknown-prop.html*/}
      <input type="radio" {...props}/>
    </label>
  );
};

Good:

const Radio = ({children, ...rest}) => {
  return (
    <label>
        {/*过滤掉不合法的input属性,在这里是children*/}
      <input type="radio" {...rest}/>
      {children}
    </label>
  );
};