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

Question

这是一种动态更改组件子项的方法吗？我有一个包装其他组件的组件，递归地遍历 child ，我想要的是更改字符串的 child 的文本。例如

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 <span>{ this.props.children }</span>;
}

在 else 中设置 childNode.props.children === "something"失败，children 是只读的。知道如何实现我想要的吗？

Answer 1

正如 React 文档中所述，React Prop 确实是只读的。您可以遵循 JSX 方法，它总是创建新元素，而不是更改现有元素 Prop 。在后期阶段，元素与虚拟 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: <div>text<div></div></div>
      if (typeof childNode.props.children === "string")
        return React.cloneElement(childNode, [], "something");
      return React.cloneElement(childNode, [], func(childNode.props.children));
    })
  }

  return <span>{ func(this.props.children) }</span>;
}