我正在尝试加载一个一旦触发就会生成iframe和天气小部件的脚本。 我可以适当地添加脚本,但是不会被调用并且不会生成iframe

我尝试过直接将脚本直接添加到渲染中,它将短暂加载iframe,然后切换回script标签

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;

#1楼 票数:0

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

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.

请参阅对文档执行写入:除非已明确打开,否则无法从异步加载的外部脚本写入文档。

  ask by user3924059 translate from so

未解决问题?本站智能推荐:

1回复

无法使用useEffect钩子对未安装的组件执行React状态更新

我有 它给了我 警告:无法对卸载的组件执行 React 状态更新。 这是一个空操作,但它表明您的应用程序中存在内存泄漏。 要修复,请取消 useEffect 清理函数中的所有订阅和异步任务。 好的,问题不是如何解决它。 当我在axios承诺之后使用 setLoading(false) 时它工作正常但
3回复

React:useEffect“悖论”与eventHandler道具

这个例子有问题。 我有一个Input组件。 这个输入组件有一个onChange属性来处理内部的任何数据更改。 应该是,如果我从外部更新value ,则不会触发onChange道具,因为输入组件内部没有任何更改。 如果你开始输入onChange道具就会被触发,我也可以从外部更新状态。 但是如果满足某
1回复

React.useEffect不清理

我有一个用于检测外部点击的自定义反应钩子。function useOutsideClick(ref, onOutsideClick) { useEffect(() => { const onClick = event => { if (!ref.current?.con
1回复

更新请求后如何触发useEffect重新渲染

我有一个初始状态,在发出 HTTP 请求后,我使用请求中的值更新初始状态。 当用户更新这些值时,我会发出另一个 HTTP 请求来更新这些值。 我有一个 useEffect 从中获取数据以更新初始状态值。 在那个 useEffect 中,如果我添加状态依赖项,它会导致无限循环。 由于我的表单字段很多
2回复

如何阻止React.useEffect的副作用?[复制]

这个问题在这里已经有了答案: 停止 useEffect 在 mount 上运行(2 个回答) 3 个月前关闭。 一旦我继续在我的网络应用程序中路由/log
1回复

useEffect不断地触发GET请求

我正在学习 React 并尝试自己做一个小项目,但是我在使用useEffect遇到了useEffect 。 我正在尝试使用来自后端的信息自动填充表单。 我可以让它自动填充,但它不断发送 GET 请求。 这就是我所拥有的: useEffect(() => { axios
2回复

React组件的返回依赖于来自useEffect的数据

旧标题:React useEffect 不会在页面重新加载时运行useEffect(()=>{console.log("I ran")}, []) // should run once 如果我导航到包含该组件的页面,它确实会运行,但如果我重新加载该页面,它就不会再次运行。 即使我重新加载页面,
2回复

React.js:useEffect()依赖冻结了我的应用

当用户之前没有选择任何产品时,我试图显示模态。 我最终得到了useEffect()依赖的无限循环。 我不确定如何在 React 中正确地做到这一点。 我可以从依赖项中删除setCurrentModal ,但我收到警告。 如果我添加它,我的 React 应用程序就会冻结。 如何组织我的代码以避免冻结?