React.cloneElement:传递新的子代还是复制props.children? [英] React.cloneElement: pass new children or copy props.children?

问题描述

我对React.cloneElement的第三个子级"参数感到困惑，它与this.props.children的关系.

I'm confused by the third "children" parameter of React.cloneElement and it's relation to this.props.children.

我遵循了本指南在高阶组件上，并具有以下代码:

I followed this guide on higher order components and have the following code:

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?

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

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

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

    在指南中说

    组件不保证完整的子树都可以解析.

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

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

    What does that mean in my situation? That this.props.children is not there?

    添加了第四个问题:为什么我应该完全克隆道具而不是直接编辑它们?

    Added 4th question: Why should I clone the props at all and not just directly edit them?

    推荐答案

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

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

    任何一个都可以.

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

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

    使用cloneElement时，您无需自己复制道具.您可以执行React.cloneElement(elementsTree, {something: 'nice!'}).

    When using cloneElement, you don't need to copy the props yourself. You can just do React.cloneElement(elementsTree, {something: 'nice!'}).

    该指南中的内容为组件不保证完整的子树都可以解析."在我的情况下这意味着什么?那个this.props.children不在那里吗?

    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在其render方法中未使用this.props.children，则将永远不会渲染Bar.

    I can't be sure what that article meant, but I believe the author means that your component can choose not to use this.props.children. For example, if you render <Foo><Bar /></Foo>, then Foo will receive <Bar /> in this.props.children, but if Foo doesn't use this.props.children in its render method, then Bar will never be rendered.

    为什么我应该完全克隆道具，而不仅仅是直接编辑它们?

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

    反应元素是不可变的，创建元素后无法更改道具.这样可以在React中进行某些性能优化，否则将无法实现.

    React elements are immutable and there's no way you can change the props after an element is created. This allows some performance optimizations in React which wouldn't be possible otherwise.

    这篇关于React.cloneElement:传递新的子代还是复制props.children?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！