Question

问题：

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

这是因为我需要将这个javascript文件放在窗口对象的组件树下方。不幸的是，我无法控制此javascript文件，但需要它。

此文件的URL在每个环境（开发，暂存，产品等）中都不同。该构建过程当前仅构建一次create-react-app，然后在每个环境中对该包进行升级。我从JSON文件中获得了相对URL，该URL是在应用程序开始时加载的。

尝试的解决方案

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

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

有人可以给我一些有关如何解决此问题的指导吗？

谢谢。

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

从URL加载JS文件，然后等待其执行完成

问题：

尝试的解决方案

1 个答案: