时间戳

首页 > 解决方案 > 在 React 组件之前等待外部脚本加载

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

问题描述

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

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

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

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

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

标签： javascriptreactjsnext.js

解决方案

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

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

然后在<Page>组件中：

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

推荐阅读