React.cloneElement: distinguish element from its clone

154 Views Asked by At

After

const element = <MyComp />
const cloned = React.cloneElement(element, someProps)

both an element and its clone are rendered. (The original element is rendered into a portal.)

Now I need to attach a ref to cloned but not element.

I believe I can achieve this by setting custom DOM props, e.g.:

const cloned = React.cloneElement(element, { ...someProps, 'data-cloned': true })

and discovering the prop in a callback ref on MyComp:

const element = <MyComp ref={el => if (el.dataset.cloned) { myRef.current = el }}

but it feels like I might be missing a better way of doing this than setting and reading from data attributes?

(Update: and it seems it doesn't work because with this mechanism I never know which instance should reset the ref to null)

0

There are 0 best solutions below