在 React 组件之前等待外部脚本加载答案

【问题标题】：Wait for external script to load before the React component在 React 组件之前等待外部脚本加载
【发布时间】：2020-03-06 19:23:09
【问题描述】：

我有一个 NextJS 应用程序，页面结构大致如下：

<Head>
<Navigation>
<Page>
<Footer>

我有一个 DTM 脚本需要加载到 <Head> 组件中，然后我在 <Page> 组件中触发了一些标签。但问题是，<Page> 中的标签在 DTM 脚本加载到页面之前开始触发。

那么，有没有办法让<Head> 标签中的DTM 脚本在<Page> 组件加载之前先加载？我一直在寻找使用“componentwillmount”，但它已被弃用。

有人可以建议我如何解决这个问题吗？

【问题讨论】：

外部脚本是否提供回调？
您可以使用next/head 将DTM 脚本的<script> 放置在<head> 中——这有望在nextjs 的代码之前加载。理想情况下，您希望在 nextjs 放置其代码的任何位置之前将其放在 <body> 中。
我已经使用了带有 nextjs 的 react-load-script，它有一个 onLoad 回调可以使用。您也可以在组件挂载后对要渲染的组件使用 nextjs 延迟加载。
我已经在我的组件中使用了 next/head。我已经在那里添加了脚本。我实际上是在调用我的 /static/js 文件，然后该 js 文件根据当前主机名加载外部 DTM 脚本。但是，组件中的 DTM 函数会在脚本完全加载和执行之前触发。
我遇到了同样的问题。我将 tinyMCE 脚本放在 next/head 中，大约 50% 的机会在加载页面时加载脚本。如果不是，我的编辑器不会显示。

【解决方案1】：

您可以使用 vanilla javascript 从您的 <Page> 组件中收听脚本加载事件。在你的custom _document:

<script id="dtm" src="dtm.js" />

然后在<Page> 组件中：

document.getElementById("dtm").addEventListener('load', () => {
  // DTM is loaded
})

【讨论】：

【解决方案2】：

您可以在 Nextjs 的任何组件中使用Head。在Page 中添加Head 并在其中放入<script/> 怎么样

【讨论】：

【解决方案3】：

是的，componentwillmount 已被弃用。但你可以使用 UNSAFE_componentWillMount() 方法代替这个。在上面的函数中加载你的脚本。

【讨论】：