如何修改一个 react dom object？

Question

已知一个 react dom object，如何修改它（的子孙 object），得到一个新的 react dom object 用于 render 呢？

比如一个 div > p > span
我克隆一个孙元素 span._yellow 的 div

    const div = <div>
        <p>
            <span className="_blue"></span>
        </p>
    </div>
    const p = div.props.children
    const span = p.props.children
    span.props.className = "_yellow"

这个时候会报错 not extensible

Answer 1

两年后，更强的自己前来作答：

const B = (
  <div>
    <p>
      <span className='_blue'>blue</span>
    </p>
  </div>
)

const Y = cloneElement(
  B.props.children.props.children,
  {
    className: '_yellow'
  },
  'yellow'
)

const Comp = () => {
    return <div>
        {B}
        {Y}
    </div>
}

Answer 2

操作dom 可以用ref
官网搜一下ref就行了。不建议操作dom

Answer 3

React.children.map试下