Estoy tratando de usar un código de Tableau.com que incrusta un informe en una página. Ese código HTML se guarda en la base de datos como texto y quiero convertirlo a HTML en la interfaz de una aplicación React, pero el problema es que el código ahora funciona a pesar de que el texto sin formato se convierte en HTML con éxito. Creo que el problema proviene de que traté de poner algunos registros de consola allí y no se están ejecutando, y el informe no se está cargando. Intenté ejecutar el código incrustado solo en un archivo separado y funciona bien, pero en React algo no está bien. ¿Alguien puede ayudarme?

Esta es una muestra de código React

 import './App.css'; function App() { const embedCode = "<div class='tableauPlaceholder' id='viz1646642304233' style='position: relative'><object class='tableauViz' style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='RegionalSampleWorkbook&#47;Storms' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /><param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='language' value='en-GB' /></object></div> <script type='text/javascript'> var divElement = document.getElementById('viz1646642304233'); var vizElement = divElement.getElementsByTagName('object')[0]; vizElement.style.width='800px';vizElement.style.height='650px'; var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); </script>"; return ( <div className="App"> <header className="App-header"> <div dangerouslySetInnerHTML={{__html: embedCode}}/> </header> </div> ); } export default App;