Por lo general, hay formas muy fáciles de evitar mutar tu DOM directamente desde React, pero desafortunadamente no estoy en una de esas situaciones en este momento. Estoy usando una API que luego incrusta una gran cantidad de contenido en mi página en un div con una identificación de tablero.

Necesito manipular el contenido de la página y mover ciertos elementos y cosas. Actualmente agrego un detector de eventos a un elemento que existe antes de llamar a la API, con useEffect() así:

 useEffect(() => { /* Some code here... */ const setupDashboard = (dashboard) => { document.querySelector('#run').addEventListener('click', () => { dashboard.send('dashboard:run') console.log("Run clicked") }) console.log(document.querySelector("[data-title='States']")) } LookerEmbedSDK.createDashboardWithId(114) .appendTo('#dashboard') .on('dashboard:run:start', /*() => updateState('#dashboard-state', 'Running')*/ ) .on('dashboard:run:complete', /*() => updateState('#dashboard-state', 'Done')*/ ) .build() .connect() .then(setupDashboard) .catch((error) => { console.error('An unexpected error occurred', error) }) });

El fragmento de código que agrega el controlador de eventos al botón funciona, pero la siguiente declaración de la consola devuelve un valor nulo. Así que parece que debería haber una mejor manera de manipular el DOM, especialmente porque voy a cambiarlo por completo con todas mis modificaciones. Tendré que usar todo tipo de selectores de consultas, eliminaciones, adiciones y más. ¿Cuál es la mejor práctica para todo eso?

Editar: para ser claros, después de que se carga la página, si ejecuto esa línea en la consola, obtiene el elemento