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)