比如想实现 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>
);
};