美文网首页工作生活
React.cloneElement

React.cloneElement

作者: 栗子daisy | 来源:发表于2019-07-02 22:24 被阅读0次
React.cloneElement(
  element, 
  [props],
  [...children]
)
参数 说明
element React组件或者原生DOM
[props] 配置当前element的props
[...children] 配置当前element的children,也不能使用this.props.children

React.Children.map
this.props.children

React.Children.map(this.props.children,child=>{
    React.cloneElement(child,{...props},children)
})
function RadioGroup(props) {
  return(
    <div>
      {
        React.Children.map(props.children,child=>{
          return React.cloneElement(child,{name:props.name})
        })
      }
    </div>
  )
}
function RadioItem({children,...rest}) {
  return(
    <label>
      <input type="radio" {...rest}/>{children}
    </label>
  )
}
... 
<RadioGroup name="mvvm">
    <RadioItem value="vue">vue</RadioItem>
    <RadioItem value="react">react</RadioItem>
    <RadioItem value="angular">angular</RadioItem>
</RadioGroup>

<div>
<label><input type="radio" name="mvvm" value="vue">vue</label>
<label><input type="radio" name="mvvm" value="react">react</label>
<label><input type="radio" name="mvvm" value="angular">angular</label>
</div>

相关文章

  • React.cloneElement

    React.cloneElement(Dom, props, children); 第一个参数 react组件或者...

  • React.cloneElement

    React.cloneElement参数 第一个参数:element 必须是一个存在的React组件或者原生DOM...

  • React.cloneElement

    React.Children.mapthis.props.children

  • 2017-11-14(TW实习)

    遇到的问题 React.cloneElement 用于this.props.children向子组件传值,一直无法...

  • react之React.cloneElement()

    react提供的这个方法克隆组件的方法,可能我们在平常的开发中用的很少,主要可能是我们并不知道或者并不了解这个方法...

  • 12. React.cloneElement()解析

    说明: 该方法以 element 作为起点,克隆并返回一个新的 React 元素。所产生的元素将具有原始元素的pr...

网友评论

    本文标题:React.cloneElement

    本文链接:https://www.haomeiwen.com/subject/sazthctx.html