Javascript Next.js中的Trustpilot信任箱
我正在尝试将Trustpilot TrustBox添加到Next.js应用程序中 我的组件中有以下内容:Javascript Next.js中的Trustpilot信任箱,javascript,reactjs,next.js,trustpilot,Javascript,Reactjs,Next.js,Trustpilot,我正在尝试将Trustpilot TrustBox添加到Next.js应用程序中 我的组件中有以下内容: var trustbox = document.getElementById('trustbox'); window.Trustpilot.loadFromElement(trustbox); 在我的脑海里: <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.boo
var trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);
在我的脑海里:
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
在我的html中:
<div id="trustbox" className="trustpilot-widget" data-locale="en-GB" data-template-id="XX" data-businessunit-id="XX" data-style-height="130px" data-style-width="100%" data-theme="light" data-stars="5" data-schema-type="Organization">
<a href="https://uk.trustpilot.com/review/XX" target="_blank">Trustpilot</a>
</div>
这在热重新加载时工作良好。例如,如果我在服务器运行时添加代码。但是o fresh重新加载它会中断,我得到以下错误:
无法读取未定义的属性“loadFromElement”
有什么想法吗?想出来了。在componentDidMount中需要以下代码来确保首先加载外部js
componentDidMount() {
var aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js";
aScript.async = "true"
document.head.appendChild(aScript);
aScript.onload = function () {
var trustbox = document.getElementById('trustbox');
window.Trustpilot.loadFromElement(trustbox);
};
}
希望这能帮助那些陷入同样困境的人。对于未来的读者,Trustpilot现在有一个单页应用的文档,你可以找到 我想知道为什么即使他们的官方文档也没有呈现任何内容,但经过两个小时的痛苦之后,我发现在我写这篇文章的时候,你无法将他们的小部件加载到勇敢的导航器上