Me he quedado atascado con la integración de un script externo en mi aplicación React. La idea es utilizar un widget html/js externo que sugerirá direcciones en función de los datos del campo de entrada.
El widget requiere dos cosas:
<script type="text/javascript" src="https://some.address.com/widget.min.js"></script> - debe estar dentro de la etiqueta de encabezado html.<script> var widget = new jsWidget ({"detail1":"foo","detail2":"bar","lang":"en"});</script> - debe estar dentro de la etiqueta del cuerpo html.Mi pregunta es: ¿cómo puedo crear una nueva instancia de un script externo si el elemento dado no se importa como un módulo? Sé que la primera parte se puede resolver con useEffect hook. Sin embargo, si trato de crear una nueva instancia de jsWidget, el editor de código arroja un error que dice que jsWidget no está definido.
El widget dado funciona bien en html puro. Por ejemplo:
<html> <head> <script1></script1> </head> <body> <script2></script2> </body> </html>He estado atascado con esto durante mucho tiempo y no puedo encontrar una manera de solucionarlo. Estaría muy agradecido si alguien pudiera dar algún consejo.
tal vez no sea el mejor método. creo que funcionará
var script1 = document.createElement("script"); script1.type = "text/javascript"; script1.src = "https://some.address.com/widget.min.js"; var script2 = document.createElement("script"); script2.innerHTML = 'new jsWidget ({"detail1":"foo","detail2":"bar","lang":"en"});'; document.head.appendChild(script1); script1.onload = function () { document.body.appendChild(script2); };