React.cloneElement：传递新的孩子还是复制 props.children？

Question

我对@9​​87654322@ 的第三个“children”参数感到困惑，它与this.props.children 的关系。

我在高阶组件上关注this guide，并拥有以下代码：

render() {
    const elementsTree = super.render()

    let myPropChange = {}

    /* work on newProps... */
    myPropChange.something = "nice!".

    const newProps = Object.assign({}, elementsTree.props, myPropChange)

    /* map children */
    const newChildren = React.Children.map(elementsTree.props.children, c => something(c))

    return React.cloneElement(elementsTree, newProps, newChildren)
}

• 我应该将映射的子级放入我的newProps.children 还是应该将它们作为第三个参数传递给cloneElement？

• Object.assign 将孩子们从 props 复制到 newProps 无论如何，我应该跳过它们吗？

• 在指南中说

  组件不保证解决完整的子树。

  在我的情况下这意味着什么？那个this.props.children不存在？

• 添加了第 4 个问题：我为什么要克隆道具而不是直接编辑它们？

Answer 1

我应该将映射的子级放入我的newProps.children 还是应该将它们作为第三个参数传递给cloneElement？

应该没问题。

Object.assign 将孩子们从 props 复制到 newProps 无论如何，我应该跳过它们吗？

使用cloneElement时，不需要自己复制props。你可以做React.cloneElement(elementsTree, {something: 'nice!'})。

在指南中它说“组件不保证解决完整的子树。”在我的情况下这意味着什么？那个 this.props.children 不存在？

我不能确定那篇文章是什么意思，但我相信作者的意思是你的组件可以选择不使用this.props.children。例如，如果您渲染<Foo><Bar /></Foo>，那么Foo 将在this.props.children 中收到<Bar />，但如果Foo 在其渲染方法中不使用this.props.children，那么Bar 将永远不会被渲染。

我为什么要克隆道具而不是直接编辑它们？

React 元素是不可变的，在创建元素后您无法更改 props。这允许在 React 中进行一些性能优化，否则这是不可能的。