美文网首页工作生活
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

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