我一直堅持在我的 React 應用程式中集成外部腳本。這個想法是使用外部 html/js 小部件,它將根據輸入欄位中的資料建議地址。
小部件需要兩件事:
<script type="text/javascript" src="https://some.address.com/widget.min.js"></script>- 必須在 html 頭標簽內。<script> var widget = new jsWidget ({"detail1":"foo","detail2":"bar","lang":"en"});</script>- 必須在 html 正文標記內。
我的問題是 -如果給定專案未作為模塊匯入,我如何創建外部腳本的新實體?我知道第一部分可以用 useEffect 鉤子解決。但是,如果我嘗試創建 jsWidget 的新實體,代碼編輯器會拋出一個錯誤,指出未定義 jsWidget。
給定的小部件在純 html 中作業正常。例如:
<html>
<head>
<script1></script1>
</head>
<body>
<script2></script2>
</body>
</html>
我已經被這個問題困擾了很長時間,我不知道如何解決這個問題。如果有人可以提供一些建議,我將非常感激。
uj5u.com熱心網友回復:
也許不是最好的方法。我認為它會起作用
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);
setTimeout(() => { // maybe it takes time for the first one
document.body.appendChild(script2);
}, 1337)
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/476364.html
標籤:javascript 反应 api 外部脚本
