如下,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>)
}
}