Question

React's documentation说：

React.cloneElement（）几乎等同于：

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

然而，它也保留了裁判。这意味着，如果你的孩子有一个参考，你不会意外地从你的祖先窃取它。您将获得与您的新元素相同的参考。

所以我做了一个小例子：

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团队说“如果你的孩子有一个参考，你会不会意外地从你的祖先那里偷走它”时，React团队的意思是什么？

Answer 1

描述确实非常令人困惑，因为那里的孩子并没有引用[...children]中的React.cloneElement(element, _, [...children])，而是element。

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

因此，让我们想象以下场景中您所拥有的组件<GrandParent />

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

现在，GrandParent 假设 <Child />的引用为'child'，可能会调用this.refs.child.doSomething()。

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

现在我有一个未解决的问题 - 如果您在<Child />中克隆<Parent />两次，<GrandParent />中的引用会发生什么 - 它引用了哪些克隆？我认为答案是the last one。

这是React.cloneElement中的错误吗？

1 个答案: