React.cloneElement参数
React.cloneElement(
element,
[props],
[...children]
)
第一个参数：element
必须是一个存在的React组件或者原生DOM，以下都可以
React.cloneElement(<div />)
React.cloneElement(<Child />)
但我们通常发现用的最多的是搭配React.Children.map和this.props.children使用，如下：
React.Children.map(this.props.children,child=>{
React.cloneElement(child,{...props},children)
})
首先不能直接和this.props.children使用，一旦子元素数量大于1，type为undefined的React对象
// 子元素数量大于1,返回空
render(){
return React.cloneElement(this.props.children,...)
}
其次，这个方法的作用是为了给子组件进行自定义属性配置，这用到了第二个和第三个参数
第二个参数：props
配置当前element的props
// 我们的意图是希望每个child组件都继承父组件props
React.Children.map(this.props.children,child=>{
React.cloneElement(child,this.props)
})
但上面的写法一旦遇到嵌套组件，则会触发maximum call stack size is exceeded，因为
this.props包含了children属性，因此将一直迭代执行.
这么写能安全的继承父组件props
const {children,...otherPorps}=this.porps
React.Children.map(children,child=>{
React.cloneElement(child,otherPorps)
})
当然，props参数还可以自行配置新的属性，最终都能分别传递给每一个子组件
第三个参数：children
配置当前element的children，用的频率比起第二个参数相对较少
和第二个参数一样，这里也不能使用this.props.children，否则也将进入死循环
