Question

我对React.cloneElement的第三个“子”参数感到困惑，它与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时，您不需要自己复制道具。你可以React.cloneElement(elementsTree, {something: 'nice!'})。

在指南中它说＆＃34;组件没有保证解决完整的子树。＆＃34;这在我的情况下意味着什么？那个.props.children不在吗？

我无法确定该文章的含义，但我相信作者意味着您的组件可以选择不使用this.props.children。例如，如果您呈现<Foo><Bar /></Foo>，则Foo将在<Bar />中收到this.props.children，但如果Foo未使用this.props.children在其渲染方法中，永远不会渲染Bar。

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

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

React.cloneElement：传递新子节点还是复制props.children？

1 个答案: