Estoy tratando de obtener una referencia secundaria en el componente Wrapper, pero siempre devuelve un valor nulo. Yo uso el código común:
export const SelectableItem = ({ children }: Props) => { const ref = useRef<HTMLElement>(null); useEffect(() => { setTimeout(() => console.log(ref?.current), 1000); // returns null }, []); const child = React.Children.only(children); return React.cloneElement(child, { ref: (r) => (ref.current = r) }); }; <SelectableItem> <SomeChild /> </SelectableItem>¿Qué está mal?
No estoy recibiendo ese problema. Lo único que realmente cambié fue el archivo console.log, ya que estaba generando un error. Es de esperar que pueda descubrir qué estaba sucediendo a partir del código de trabajo a continuación.
const SelectableItem = ({ children }: Props) => { const ref = React.useRef(null); React.useEffect(() => { setTimeout(() => { console.log(ref) }, 1000); }, []); const child = React.Children.only(children); return React.cloneElement(child, { ref: (r) => (ref.current = r) }); }; ReactDOM.render( <React.StrictMode> <SelectableItem> <div /> </SelectableItem> </React.StrictMode>, document.querySelector('.react') ); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>