Next.js中的TrustPilot信任箱 [英] Trustpilot TrustBoxes in Next.js

问题描述

我正在尝试将TrustPilot Trustbox添加到Next.js应用。

我的组件中有这个Didmount：

 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刷新重新加载它会损坏，并且我得到以下错误：

无法读取未定义的属性"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);
    };
}

希望这能帮助任何坚持做同样事情的人。

这篇关于Next.js中的TrustPilot信任箱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！