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

Question

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

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

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

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

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

Answer 1

<Page>您可以使用 vanilla javascript 监听组件中的脚本加载事件。在您的自定义 _document中：

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

然后在<Page>组件中：

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