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

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

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

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

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

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

您可以使用普通javascript从<Page>组件中侦听脚本加载事件。在自定义文档中(_D(：

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

则在CCD_ 7组件中：

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

next.js提供onLoad，一旦加载外部脚本就会触发：

<Script src="https://example.org/script.js"
    onLoad={() => {
        console.log('script has loaded')
    }
/>

Nextjs可以在任何组件中使用Head。你把Head加到Page里，把<script/>放到里怎么样

相关内容