React useEffect附加脚本未触发

Question

我正在尝试加载一个脚本，该脚本一旦触发就会生成iframe和天气小部件。我可以适当地附加脚本，但它不会被调用，也不会生成 iframe

我试过直接在渲染中添加脚本，它会短暂加载 iframe，然后切换回脚本标签

const City = ({ content, schema }) => {
useEffect(() => {
let script = document.createElement("script");
script.src =
"https://darksky.net/widget/graph-bar/32.7174,-117.1628/us12/en.js?width=100%&height=400&title=Full Forecast&textColor=333333&bgColor=FFFFFF&transparency=false&skyColor=undefined&fontFamily=Default&customFont=&units=us&timeColor=333333&tempColor=ff8200&currentDetailsOption=true";
script.async = true;
document.getElementById("widget").appendChild(script);
}, [])
return (<div id="widget"></div>);
};
export default City;

Answer 1

请注意控制台中显示的警告：

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

请参阅在文档上执行写入：除非显式打开异步加载的外部脚本，否则无法从文档写入文档。