I don't get the point of statements written in React official docs:

cloneElement()

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

Clone and return a new React element using element as the starting point. The resulting element will have the original element’s props with the new props merged in shallowly. New children will replace existing children. key and ref from the original element will be preserved.

React.cloneElement() is almost equivalent to:

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

However, it also preserves refs. This means that if you get a child with a ref on it, you won’t accidentally steal it from your ancestor. You will get the same ref attached to your new element.

What makes me confused me is the statement This means that if you get a child with a ref on it, you won’t accidentally steal it from your ancestor. You will get the same ref attached to your new element.

If I am understanding Okay, the ref that points to Child element in Parent ponent will be preserved even if the Parent gets cloned. So after React.cloneElement(Parent), there are two individual Parents(which have same deep values inside, including ref), and both have refs respectively, and those refs points to same single Child. Am I corrent?

Then what works with ancestor? What is the ancestor in this context?

I don't get the point of statements written in React official docs:

cloneElement()

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

Clone and return a new React element using element as the starting point. The resulting element will have the original element’s props with the new props merged in shallowly. New children will replace existing children. key and ref from the original element will be preserved.

React.cloneElement() is almost equivalent to:

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

However, it also preserves refs. This means that if you get a child with a ref on it, you won’t accidentally steal it from your ancestor. You will get the same ref attached to your new element.

What makes me confused me is the statement This means that if you get a child with a ref on it, you won’t accidentally steal it from your ancestor. You will get the same ref attached to your new element.

If I am understanding Okay, the ref that points to Child element in Parent ponent will be preserved even if the Parent gets cloned. So after React.cloneElement(Parent), there are two individual Parents(which have same deep values inside, including ref), and both have refs respectively, and those refs points to same single Child. Am I corrent?

Then what works with ancestor? What is the ancestor in this context?

• javascript
• reactjs

1 Answer 1

To give you can example on what the docs seem to Illustrate, lets consider a ponent App that renders a ponent Main and which has two children Home and Dashboard for which it specifies 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>
      )         
   }
}

Now the main ponent clones the child elements to add a props onClick to its children,

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>
       )
   }
}

Now when the Main ponent clones the children in its like

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

which in our case are the Home and Dashboard ponent, if cloneElement were to ignore the key and ref passed to them by the App ponent, the App ponent won't have access to these children that it rendered. Hence React.cloneElement preserves the refs and keys passed to the elements even if they are cloned in child render function.

The ponent created by createdElement is cloned child, and what is used by <Main> is the cloned child, then what does ref in <App> point? Original child, or cloned child?

Does the phrase accidentally steal means something like forbidden access

Ref to an element only makes sense when the element is rendered in the DOM. In the above case the original element is not rendered but the cloned element is. Had React not assigned the same ref to the cloned ponent which is rendered in the DOM, App ponent wouldn't be interacting with anything significant. Also if at all you decide to render both original children and the cloned children, the ref will point to the cloned children.

Demo illustrating the above

P.S. CloneElement is not used to clone ponents, rather than rendered JSX instances and is done mostly to add more props to the

children ponent rendered from elsewhere

I hope the above example explains the scenario