从 URL 加载 JS 文件并等待它执行完毕答案

【问题标题】：Load JS file from URL and wait till it's finished executed从 URL 加载 JS 文件并等待它执行完毕
【发布时间】：2018-07-10 21:24:21
【问题描述】：

问题：

我正在尝试从 create-react-app 中的外部 URL 加载 javascript 文件。我需要这个 javascript 文件在 react 开始渲染根组件之前完成加载和执行。

这是因为我需要这个 javascript 文件将一些东西放在组件树下方的窗口对象上。不幸的是，我不控制这个 javascript 文件，但需要它。

此文件的 URL 因每个环境（开发、登台、产品等）而异。构建过程当前构建 create-react-app 一次，然后通过每个环境提升包。我从应用程序一开始加载的 JSON 文件中获取相对 URL。

尝试的解决方案

我曾尝试使用react-helmet，它允许我在运行时修改 URL，但我需要在继续之前完成 JS 文件的加载/解释。我似乎无法控制这种阻塞/加载时间。

我还尝试在RenderDom.Render 调用之前手动添加脚本标记，并将其包装在promise 中。这不起作用。

谁能给我一些关于如何解决这个问题的指导？

谢谢。

【问题讨论】：

stackoverflow.com/questions/25701083/…

标签： javascript reactjs create-react-app

【解决方案1】：

试试react-script-loader-hoc。

这为您提供了一个HOC，您可以在其中调用此HOC，并将您的组件称为param。这会给你一个道具scriptsLoadedSuccessfully。如果这是true，那么您的脚本已经加载。

下面是例子：

function YourComponent ({ scriptsLoadedSuccessfully }) {
   if (scriptsLoadedSuccessfully){
      return <div>Script loaded do your stuff here.</div>
   } else {
      return <div>Script not loaded wait until it gets loaded.</div>
   }
}

export default ScriptLoader('http://YOUR_SCRIPT_URL')(YourComponent);

【讨论】：