Creé un archivo HTML con Python y Jupyter Notebook que contiene gráficos hechos con Plotly. Cuando abro el archivo HTML en mi navegador, puedo ver bien los gráficos.

El problema surge cuando trato de insertar este archivo HTML en mi aplicación React usando peligrosamente SetInnerHTML. Puedo ver que para cada celda de código Jupyter que contiene el gráfico Plotly, se genera un div de la siguiente manera:

 <div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noInput"> <div class="jp-Cell-outputWrapper"> <div class="jp-OutputArea jp-Cell-outputArea"> <div class="jp-OutputArea-child"> <div data-mime-type="text/html" class="jp-RenderedHTMLCommon jp-RenderedHTML jp-OutputArea-output"> <div> <div style="height:500px; width:800px;" class="plotly-graph-div" id="d8f872f4-8de2-4892-b3fb-842a376f21ee"> </div> </div> </div> </div> </div> </div> </div>

Pero no hay contenido renderizado en él. Actualmente estoy tratando de hacer esto con el siguiente código:

 function Report(props) { return ( <div> <div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(props.report)}} /> </div> ); }

¿Alguna idea de por qué podría estar pasando esto? ¿Hay alguna alternativa a peligrosamente SetInnerHTML? No he sido capaz de encontrar una solución a este problema en cualquier lugar.

¡Gracias!