在 React 中创建外部脚本的新实例

Question

我一直坚持在我的 React 应用程序中集成外部脚本。这个想法是使用外部 html/js 小部件，它会根据输入字段中的数据建议地址。

小部件需要两件事：

<script type="text/javascript" src="https://some.address.com/widget.min.js"></script> - 必须在 html head 标签内。
<script> var widget = new jsWidget ({"detail1":"foo","detail2":"bar","lang":"en"});</script> - 必须在 html 正文标签内。

我的问题是 - 如果给定项目未作为模块导入，我如何创建外部脚本的新实例？我知道第一部分可以通过使用效果钩子。但是，如果我尝试创建 jsWidget 的新实例，代码编辑器会抛出一个错误，提示未定义 jsWidget。

给定的小部件在纯 html 中运行良好。例如：

<html>
<head>
<script1></script1>
</head>
<body>
<script2></script2>
</body>
</html>

我已经被这个问题困扰了很长时间，我想不出解决这个问题的方法。如果有人能给点建议，我将不胜感激。

Answer 1

也许不是最好的方法。我认为它会起作用

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);
};

在 React 中创建外部脚本的新实例

Creating new instances of external script in React

javascript

reactjs

api

external-script