标题手写antd中的RadioGroup组件
import { react } from 'react';
function RadioGroup (props){
return <div>
{
React.Children.map(props.Children,child=>{
return React.cloneElement(child,{name:props.name})
})
}
</div>
}
function Radio({children,...arg}){
reutrn (
<label>
<input value={props.value} {...arg} />{children}
</label>
)
}
export default class Composition extends Component {
render() {
return (
<div>
<RadioGroup name="m">
<Radio value="vue">vue</Radio>
<Radio value="react">react</Radio>
<Radio value="angular">angular</Radio>
</RadioGroup>
</div>
);
}
}
这里主要说的是React.children 他是不可变的,也就是我们不能直接给它添加属性的。
所以我们这里用到了React.cloneElement方法 ,顾名思义可根据传进了的Element添加自已一些想要的属性,从而返回一个全新的组件!