Estoy tratando de aprender cómo mostrar pequeños widgets (por ejemplo, el navegador de boletos de avión) en mi sitio web integrado en Reactjs. El código que se supone que funciona instantáneamente según el proveedor es el siguiente ("simplemente copie y pegue en el sitio web"):
<div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-"></div> <script src="https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget" async></script>Traté de buscar respuestas en Google y mi idea de cajero automático se ve así:
function OfferBrowser() { const script = document.createElement("script"); script.src = "https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget"; script.async = true; return( <div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-"></div> ) }Lo otro que probé fue también poner {script} en la etiqueta de esta manera, pero no funciona tan bien.
<div id="widget" data-widget="search" data-affiliate="873" data-campaign="873-">{script}</div>¿Cómo debo abordar esto?
Si bien no conozco React, creo que encontré el problema con el segundo fragmento de código. Ha creado un elemento de secuencia de comandos, pero no lo ha agregado al DOM y, por lo tanto, no está cargando la secuencia de comandos.
Después de buscar un bot, creo que encontré una solución.
const script = document.createElement("script"); script.src = "https://widget.wakacje.pl/v2/public/js/widgets/search-widget.js?c=widget"; script.async = true; // append the script tag to the body document.body.appendChild(script);Creo que esto debe ejecutarse después de montar el componente, de modo que el div esté en el DOM.