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

ki0zmccv 于 2023-04-20 发布在 React

关注(0)|答案(3)|浏览(154)

我有一个NextJS应用程序，页面结构松散地看起来像这样：

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

我需要在<Head>组件中加载一个DTM脚本，然后在<Page>组件中触发一些标记。但问题是，<Page>中的标记在DTM脚本加载到页面之前就开始触发了。
那么，有没有一种方法可以让<Head>标记中的DTM脚本在<Page>组件加载之前先加载呢？我本来想使用“componentwillmount”，但它已经被弃用了。
有人能建议我如何解决这个问题吗？

next.js

来源：https://stackoverflow.com/questions/60570371/wait-for-external-script-to-load-before-the-react-component

3条答案

按热度按时间

5ssjco0h1#

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

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

然后在<Page>分量中：

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

赞(0）回复(0）举报 2023-04-20

k3fezbri2#

通过Nextjs，你可以在任何组件中使用Head。你可以在Page中添加Head，然后将<script/>放在里面

赞(0）回复(0）举报 2023-04-20

t0ybt7op3#

next.js提供了onLoad，它在加载外部脚本时触发：

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

赞(0）回复(0）举报 2023-04-20

我来回答

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

3条答案

相关问题

热门标签

最新问答