时间戳

首页 > 解决方案 > React.cloneElement 如何与 chldren 一起使用？

reactjs - React.cloneElement 如何与 chldren 一起使用？

问题描述

令人惊讶的是，我没有找到任何完整的React.cloneElement.

这是文档所说的

React.cloneElement(
  element,
  [props],
  [...children]
)

所有示例都省略了children参数，但我不明白为什么它包含...在其中。它是规则的还是分散的阵列？谁能提供一个完整的例子来说明如何克隆一个带有孩子的元素？

我也不清楚现有的孩子是否被保留或从克隆中删除？既然props被保留并且孩子被存储在道具中，这是否意味着我们传递给cloneElement的孩子将被添加到现有的孩子中？如果是 - 按什么顺序？

更新

问题是我们可以描述组件外部和内部的子组件，但不清楚它是如何协同工作的。

这是一些代码

const WithChildren = props => {
  return (
    <div>
      <h1>title inside WithChildren</h1>
      {props.children}
    </div>
  )
}

const Child = props => {
  return (
    <span>{props.val} child</span>
  )
}

const clone = React.cloneElement(
  <WithChildren a={0} c={42}>
    <p>some paragraph</p>
  </WithChildren>,
  {a: 1, b: 2},
  <Child val="first" />,
  <Child val="second" />
);

什么是 html，clone为什么？

标签： reactjs

解决方案

首先，这种表示法与数组无关。方括号表示可选参数。省略号表示可变数量的参数。

  • [props]是一个可选对象，它与原始元素的 props 浅合并以形成克隆元素的 props。
  • [...children]是一个可选的子元素列表，如果指定，它将成为克隆元素中的子元素，element必要时替换 的子元素。

React 组件接受多个孩子是很典型的，因此也接受多个孩子是有道理的React.cloneElement。

例如，

React.cloneElement(
    <SomeComponent a={0} />,
    {a: 1, b: 2},
    <Foo />,
    <Bar />
);

相当于

<SomeComponent a={1} b={2}>
    <Foo />
    <Bar />
</SomeComponent>

从概念上讲，React.cloneElement是这样的：

function cloneElement(element, props, ...children) {
    return (
        <element.type
            {...element.props}
            {...props}
            ref={child.ref}
            key={child.key}
        >
            {children}
        </element.type>
    );
}

更新

针对问题中的更新：

克隆将是

<WithChildren a={1} b={2} c={42}>
  <Child val="first" />
  <Child val="second" />
</WithChildren>

至于为什么，在文档中有解释：

结果元素将具有原始元素的道具和新道具的浅层合并。

这意味着克隆元素的道具计算为

Object.assign(
    {a: 0, c: 42}, // original props
    {a: 1, b: 2}   // new props
)

这是{a: 0, b: 2, c: 42}。

新的孩子将取代现有的孩子。

这表示

<Child val="first" />
<Child val="second" />

完全取代

<p>some paragraph</p>

如果您想更深入地了解原因，最好询问 React 开发人员 :)

推荐阅读