问题描述
我正在尝试将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。通常,我将搜索以查看供应商是否具有与单页应用程序集成的任何文档。如果没有,您可能需要进行一些代码探索,以找出如何在约束内最好地支持所需的功能。