Question

我有一个NextJS应用，页面结构看起来像这样：

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

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

因此，有没有办法让<Head>组件加载之前先加载<Page>标记中的DTM脚本？我本打算使用“ componentwillmount”，但已过时了。

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

Answer 1

您可以使用香草javascript来监听<Page>组件中的脚本加载事件。在您的custom _document中：

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

然后在<Page>组件中：

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

Answer 2

Nextjs可以在任何组件中使用Head。您如何在Head中添加Page并将<script/>放入

Answer 3

是，不推荐使用componentwillmount。但是，相反，您可以使用UNSAFE_componentWillMount（）方法。将脚本加载到上述函数中。