Si tenemos el componente Foo de React que instancia la clase Bar y necesitamos pasar el elemento HTMLCollection con ID foo a Bar , ¿cómo se puede hacer?

Idealmente, Bar.js debería permanecer sin cambios.

Intenté lo siguiente:

Foo.js

 import Bar from './Bar'; const Foo = () => { const elem = document.getElementById('foo'); const bar = new Bar(elem, {}); return ( <div id="foo"> </div> ); }; export default Foo;

Bar.js

 export default class Bar { constructor(domElement, config = {}) { console.log(domElement); // null console.log(domElement.getElementsByClassName('bar')); // null } }

pero domElement siempre es null , tal vez porque cuando ejecutamos document.getElementById , el elemento div#foo aún no se ha representado.

También probé el uso useRef :

Foo.js

 import { useRef } from 'react'; import Bar from './Bar'; const Foo = () => { const elemRef = useRef(null); const bar = new Bar(elemRef, {}); return ( <div id="foo" ref={elemRef}> </div> ); }; export default Foo;

Bar.js

 export default class Bar { constructor(domElement, config = {}) { console.log(domElement); // {current: null} console.log(domElement.getElementsByClassName('bar')); // Uncaught TypeError: domElement.getElementsByClassName is not a function } }

pero obteniendo el error

TypeError no detectado: domElement.getElementsByClassName no es una función

¿Cuál es la forma correcta de hacer esto?