手写antd中的RadioGroup组件

标题手写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添加自已一些想要的属性，从而返回一个全新的组件！