如何在Gatsby.js项目中的ReactJS组件中正确添加外部脚本？

如何解决如何在Gatsby.js项目中的ReactJS组件中正确添加外部脚本？

我正在尝试将trustpilot小部件添加到我的Gatsby.js网站。为了使Widget样式生效，需要从trustpilot CDN加载外部脚本。

<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>

我尝试了多种方法将此脚本添加到页脚组件中。我尝试的第一件事是React Helmet。我使用以下代码添加了

：

<Helmet>
    <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
</Helmet>

最初加载页面时，脚本似乎已加载并且样式有效。一旦导航到其他页面，样式就会消失。重新加载时，它又回来了。

然后我尝试将脚本添加到componentDidMount（）

componentDidMount() {
    var addScript = document.createElement('script');
    addScript.setAttribute('src','//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js');
    document.body.appendChild(addScript);
}

但是即使那样也会产生相同的结果。

这是怎么回事？外部js脚本会消失吗？如何正确加载它以使其保持原状？

解决方法

当您导航离开时，父组件将被卸载，并且Helmet从script中删除相应的head标签。为避免这种情况，请将组件放在页面组件上方，例如根据需要使用wrapPageElement或wrapRootElement。
将代码注入DOM的幼稚脚本将有问题。 React has some notes and tips on this in the documentation。通常，我将搜索以查看供应商是否具有与单页应用程序集成的任何文档。如果没有，您可能需要进行一些代码探索，以找出如何在约束内最好地支持所需的功能。