Reactjs 这是React.cloneElement中的错误吗？

说：

React.cloneElement（）几乎等同于：

{children}

但是，它也保留了引用。这意味着，如果你得到一个带有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;

import-React，{Component，Children，cloneElement}来自'React'；
类包装器扩展组件{
render（）{
return cloneElement（仅限子对象）（此道具子对象）{
参考：（参考）=>{
日志（“包装器”，参考）；
},
});
}
}
常量MyComponent=（）=>
{
控制台日志（“原始”，参考）；
}}>
我的内容
导出默认MyComponent；

（小提琴：）

我以为呈现

MyComponent

会同时记录

“包装器”…

和

“原始”…

，但似乎只调用了包装器引用回调

---

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

描述确实非常混乱，因为那里的孩子在

React.cloneElement（元素，[u，[…子元素]）

中没有提到

[…子元素]

，而是指

元素

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

因此，让我们设想以下场景，其中在组件
中

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



现在，祖父母假设
的ref是
'child'
，并可能调用
this.refs.child.doSomething（）

但是，在中，如果您在
中克隆
，
将失去其对
的所有权，并且不能再通过
this.refs
调用它。正如您在当前版本中看到的那样，这一问题已得到修复，因此每当您克隆一个元素时，其父元素仍然可以引用该克隆


现在我有一个悬而未决的问题-如果在
中克隆
两次，那么
中的引用会发生什么情况-它引用的是哪个克隆？我认为答案是。
这里涉及的复杂性是一个很好的理由，可以避免引用和克隆元素。