Después de actualizar a React 18, tengo problemas con la representación emergente de Leaflet.
Parece que la nueva función de representación se ha vuelto asíncrona, lo que rompe la visualización de la ventana emergente de Leaflet (porque Leaflet necesita calcular el tamaño de la ventana emergente para el posicionamiento, pero ahora obtiene un contenido vacío ya que React aún no ha renderizado la ventana emergente).
Antes (funcionando como se esperaba):
marker.bindPopup(() => { var div = document.createElement('div'); ReactDOM.render(<MyPopup />); console.log(div.innerHTML); // <div>[...]</div> return div; });Con React 18 (posicionamiento roto):
marker.bindPopup(() => { var div = document.createElement('div'); createRoot(div).render(<MyPopup />); console.log(div.innerHTML); // empty string! return div; }); ¿Hay alguna forma de forzar a React 18 a mostrar la ventana emergente antes de devolver el div ?
Gracias de antemano por su ayuda e ideas.
Acabo de encontrar otra solución que parece funcionar y que se adapta mejor a un entorno de producción: flushSync . En la documentación de React, no se menciona para este propósito, solo para optar por no participar en el procesamiento por lotes automático.
Todavía no estoy seguro de si esta es la forma correcta de hacerlo o si se romperá en una actualización futura.
marker.bindPopup(() => { var div = document.createElement('div'); const root = createRoot(div); flushSync(() => { root.render(<MyPopup />); }); console.log(div.innerHTML); // <div>[...]</div> return div; });No lo probé en su escenario, pero tal vez actuar podría funcionar https://reactjs.org/docs/testing-recipes.html#act
Recuerde importar act desde react-dom/test-utils
marker.bindPopup(() => { var div = document.createElement('div'); const root = createRoot(div); act(() => { root.render(<MyPopup />); }); return div; });