这是 React.cloneElement 中的错误吗？

Question

React's documentation 说：

React.cloneElement() 几乎等同于：

<element.type {...element.props} {...props}>{children}</element.type>

但是，它也保留了 refs。这意味着如果你得到一个带有 ref 的孩子，你不会不小心从你的祖先那里偷走它。您将获得附加到新元素的相同 ref。

所以我做了这个小例子：

import React, { Component, Children, cloneElement } from 'react';

class Wrapper extends Component {
    render() {
        return cloneElement(Children.only(this.props.children), {
            ref: (ref) => {
                console.log("wrapper", ref);
            },
        });
    }
}

const MyComponent = () =>
    <Wrapper>
        <div ref={ref => {
            console.log("original", ref);
        }}>
            My content
        </div>
    </Wrapper>

export default MyComponent;

（小提琴：https://jsfiddle.net/pxho45um/）

我认为渲染MyComponent 会同时记录"wrapper" <div>...</div> 和"original" <div>...</div>，但似乎只调用了包装器引用回调。

这不是与文档相反吗？或者当 React 团队说“如果你得到一个带有 ref 的孩子，你就不会不小心从你的祖先那里偷走它”是什么意思？

Answer 1

描述确实很混乱，因为React.cloneElement(element, _, [...children])中的child不是指[...children]，而是element。

但是，它（它指的是 React.cloneElement()）也保留了 refs。这意味着如果你得到一个带有 ref 的孩子，你不会不小心从你的祖先那里偷走它。您将获得附加到新元素的相同 ref。

让我们想象一下下面的场景，你有一个组件<GrandParent />

  <Parent ref='parent'>
    <Child ref='child'>
    </Child>
  <Parent />

现在 GrandParent 假定<Child /> 的引用是'child' 并且可能调用this.refs.child.doSomething()。

但是，在previous version of react 中，如果您在<Parent /> 中克隆<Child />，<GrandParent /> 将失去其对<Child /> 的所有权，并且不能再通过this.refs 调用它。正如您在当前版本中看到的那样，此问题已得到修复，因此无论何时克隆一个元素，其父元素仍可以引用该克隆。

---

现在我有一个悬而未决的问题 - 如果您在 <Parent /> 中克隆两次 <Child /> 怎么办，<GrandParent /> 中的引用会发生什么情况 - 它指的是哪个克隆？我想答案是the last one。