javascript - React.cloneElement : pass new children or copy props. child ？

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)
}

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

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

  <

• 指南中说

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

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

• 添加了第 4 个问题:为什么我应该完全克隆 Prop 而不是直接编辑它们？

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将收到 <Bar />在this.props.children , 但如果 Foo不使用 this.props.children在其渲染方法中，然后是 Bar永远不会被渲染。

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

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