使用React.cloneElement（）保留的引用

Question

我不明白在React官方文檔中寫的聲明：

cloneElement（）

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

使用element作為起點克隆並返回一個新的React元素。 結果元素將具有原始元素的道具，新道具以淺層方式合並。 新的孩子將取代現有的孩子。 key和ref將保留原始元素。

React.cloneElement（）幾乎相當於：

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

但是，它也保留了refs。 這意味着，如果你的孩子有一個參考，你不會意外地從你的祖先竊取它。 您將獲得與新元素相同的參考。

讓我困惑的是聲明這意味着如果你有一個帶有參考的孩子，你就不會意外地從你的祖先那里偷走它。 您將獲得與新元素相同的參考。

如果我理解正常，即使父克隆，也會保留指向父組件中的子元素的引用。 因此，在React.cloneElement(Parent) ，有兩個單獨的React.cloneElement(Parent) （內部具有相同的深度值，包括ref），並且兩者都分別具有ref，並且那些refs指向同一個Child。 我是否正確？

那么祖先的作用是什么？ 在這種情況下，祖先是什么？

Answer 1

為了舉例說明文檔看起來是什么樣的，我們可以考慮一個組件App，它呈現一個組件Main ，它有兩個孩子Home和Dashboard，它指定了refs

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忽略了key和由App組件傳遞給它的ref ，則App組件將無法訪問它呈現的這些子組件。 因此，React.cloneElement保留傳遞給元素的引用和鍵，即使它們是在子渲染函數中克隆的。

由createdElement創建的組件是克隆子組件， <Main>使用的組件是克隆子組件，那么<App>中的ref是什么意思？ 原來的孩子，還是克隆的孩子？

這句話是否意外竊取意味着禁止訪問

只有元素在DOM中呈現時才能引用元素。 在上面的例子中，原始元素不會被渲染，但克隆元素是。 如果React沒有為在DOM中呈現的克隆組件分配相同的引用，則App組件將不會與任何重要事件進行交互。 此外，如果您決定渲染原始孩子和克隆兒童，那么裁判將指向克隆兒童。

演示說明以上內容

PS CloneElement不用於克隆組件，而不是渲染JSX實例，主要是為了添加更多的道具

從其他地方渲染的子組件

我希望上面的例子解釋了這個場景