在React中动态更改组件的子项

它是一种动态更改组件子项的方法吗？我有一个包装其他组件的组件,递归地走过孩子们,我想要的是改变子串的文本.例如

render() {
   const func = (node) => {
    React.Children.forEach(node.children, (childNode) => {
      if (childNode && childNode.props && typeof childNode.props.children === "object") {
        func(childNode.props);
      }
      else if (typeof childNode.props.children === "string"){
        console.log(childNode.props);
      }
    })
  }

  func(this.props);

  return { this.props.children };
}

在else中设置childNode.props.children ==="something"失败,children是只读的.知道如何实现我的目标吗？

React道具的读取确实如React docs中所述.您可以遵循JSX方法,它始终创建新元素,而不是更改现有元素道具.在稍后阶段,元素与Virtual DOM中的现有React组件协调.

要通过JavaScript更改元素的道具,可以使用React.cloneElement方法克隆元素.请注意,在这种情况下,您不应渲染this.props.children,而是渲染新的结果元素树:

render() {
   const func = (children) => {
    return React.Children.map(children, (childNode) => {
      if (typeof childNode === "string")
        return "something"; // cover case: 
text

      if (typeof childNode.props.children === "string")
        return React.cloneElement(childNode, [], "something");
      return React.cloneElement(childNode, [], func(childNode.props.children));
    })
  }

  return { func(this.props.children) };
}