Ok, esta pregunta suena rara, pero escúchame:

Estoy usando @uppy/react, y ofrece algunos botones para activar las cargas del proveedor de archivos en la nube (Google Drive, DropBox, etc.)

Puedo obtener esos botones con document.querySelector .

Quiero renderizar un componente personalizado dentro de uno de ellos, ¡pero no sé cómo! Probé los métodos createPortal y render de ReactDom de diferentes maneras, pero ninguno de ellos funcionó.

Sé que esto es muy anti-patrones, pero aún no he logrado convencer a mi diseñador de la idea...

Esto es lo que estoy intentando actualmente:

 const GDriveToggle = () => { const el = document.querySelector('[data-cy="GoogleDrive"]'); const node = document.createElement("div") // I have also tried React.createElement here useEffect(() => { if (el && node) { ReactDOM.createPortal(<div>Foo</div>, node); // I have also tried render() here el?.appendChild(node) console.log(el) // el has node inside of it console.log(node) // node has the foo text inside of it // but none show up inside the button on the page, I'm guessing it gets lost on any // rerender? } }, [el, node]); return null; };