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

Question

我对 React.cloneElement 的第三个 "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)
}

我应该将映射的 children 放入我的 newProps.children 还是应该将它们作为第三个参数传递给 cloneElement?
Object.assign 将 children 从 props 复制到 newProps 无论如何，我应该跳过它们吗？
指南中说

Components don’t have a guaranty of having the full children tree resolved.

在我的情况下这意味着什么？那个this.props.children不在吗？
添加了第 4 个问题：为什么我应该完全克隆道具而不是直接编辑它们？

Answer 1

Should I put the mapped children into my newProps.children or should I pass them as the third parameter to cloneElement?

两者都可以。

Object.assign copied the children from props to newProps anyway, should I skip them?

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

In the guide it says "Components don’t have a guaranty of having the full children tree resolved." What does that mean in my situation? That this.props.children is not there?

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

Why should I clone the props at all and not just directly edit them?

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

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

React.cloneElement: pass new children or copy props.children?

javascript

higher-order-functions

reactjs