cloneElement用法问题

#1

如下，B组件用了react的cloneElement方法，处理子元素，我想给两个span标签分别加上aaa的样式名，但现在的方法破坏了原来的结构，把一个p标签弄没了，应该怎么用

import React from 'react'

class B extends React.Component{
  render(){
    return(<div className="level-1">
      {this.props.children.map((child,index)=>{
        if(index==0){
          return child.props.children.map(grandson=>{
            return React.cloneElement(grandson,{className:'aaa'})
          })
        }else{
          return child
        }
      })}
    </div>)
  }
}
export default class A extends React.Component{
  render(){
    return (<div className="level-0">
      <B>
        <p>
          <span>111</span>
          <span>2222</span>
        </p>
        <p>3333</p>
      </B>
    </div>)
  }
}

#2

明明state就能控制的事情，为什么搞这么复杂

#3

学习学习，，，

#4

大神，有解决方法吗

#5

递归遍历子节点，判断如果是span，则添加样式。cloneElement的第三个参数为节点的children

#6

你应该没明白我说的问题，现在的问题是我遍历了两层props.children，第二层返回的是子，即span标签，而它的父p标签没了。
应该怎么做呢

#7

代码逻辑问题
if(index==0){
let grandsons = child.props.children.map(grandson=>{
return React.cloneElement(grandson,{className:‘aaa’})
});
return React.cloneElement(child,null,grandsons);
}

1 Like
#8

谢谢，解决了我的问题~