Question

我不明白用React official docs编写的声明的意思：

cloneElement（）
React.cloneElement(
  element,
  [props],
  [...children]
)
使用element作为起点克隆并返回一个新的React元素。生成的元素将具有原始元素的道具，而新的道具将被浅层合并。新的孩子将替换现有的孩子。原始元素的键和ref将保留。

React.cloneElement（）几乎等同于：
<element.type {...element.props} {...props}>{children}</element.type>
但是，它也保留引用。这意味着，如果您得到一个带有裁判的孩子，就不会意外地从祖先那里偷走它。您将获得与新元素相同的引用。

让我感到困惑的是陈述 ，这意味着如果您得到一个带有裁判的孩子，就不会意外地从祖先那里偷走它。您将获得与新元素相同的参考。

如果我了解“确定”，即使父对象被克隆，指向父元素中子元素的引用也将保留。因此，在React.cloneElement(Parent)之后，有两个单独的Parent（内部具有相同的深层值，包括ref），并且它们分别具有ref，并且这些ref指向同一单个Child。我可以吗？

那祖先能用什么呢？在这种情况下祖先是什么？

Answer 1

为使您能够举例说明文档似乎说明了什么，让我们考虑一个组件App，该App呈现了一个组件Main，并且具有两个子级Home和Dashboard，并为其指定了引用

class App extends React.Component {
   constructor(props) {
      super(props);
      this.homeRef = React.createRef();
      this.dashboardRef = React.createRef();
   }
   render() {
      return (
          <Main>
               <Home ref={this.homeRef} key={'Home'}/>
               <Dashboard ref={this.dashboardRef} key={'Dashboard'}/>
          </Main>
      )         
   }
}

现在，主要组件克隆了子元素，以便为其子元素添加道具onClick

class Main extends React.Component {
   onClick = () => {}
   render() {
       return (
          <div>
              {/* Some content here */}
              {React.Children.map(this.props.children, child => {
                 return React.cloneElement(child, {onClick: this.onClick})
               })}
          </div>
       )
   }
}

现在，当Main组件以类似的方式克隆子项时

React.cloneElement(child, {onClick: this.onClick})

在我们的例子中是Home和Dashboard组件，如果cloneElement忽略了App组件传递给他们的key和ref，则App组件将没有访问它呈现的这些子项。因此，React.cloneElement保留传递给元素的ref和key，即使它们被克隆到子渲染函数中也是如此。

createdElement创建的组件是克隆的子代，什么是   <Main>使用的是克隆的子项，那么<App>中的ref指向什么？   原来的孩子还是克隆的孩子？

该词是否意外被盗表示是否被禁止   访问

仅当元素在DOM中呈现时，对元素的引用才有意义。在上述情况下，不呈现原始元素，但呈现克隆的元素。如果React没有将相同的ref分配给在DOM中呈现的克隆组件，则App组件不会与任何重要的交互。另外，如果您决定同时渲染原始子项和克隆的子项，则引用将指向克隆的子项。

Demo illustrating the above

P.S。。CloneElement不用于克隆组件，而不是用于呈现JSX实例，并且主要用于向

添加更多道具。

从其他地方渲染的儿童组件

我希望以上示例可以说明情况

使用React.cloneElement（）

cloneElement（）

1 个答案: