Next.js 中的 Trustpilot 信任框答案

【问题标题】：Trustpilot TrustBoxes in Next.jsNext.js 中的 Trustpilot 信任框
【发布时间】：2019-02-27 19:32:10
【问题描述】：

我正在尝试将 Trustpilot TrustBox 添加到 Next.js 应用程序。

我的 componentDidMount 中有这个：

 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>

这在热重载时工作正常。例如。如果我在服务器运行时添加代码。但是重新加载它会中断，我收到以下错误：

无法读取未定义的属性“loadFromElement”

有什么想法吗？

【问题讨论】：

标签： javascript reactjs next.js trustpilot

【解决方案1】：

想通了。需要在 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);
    };
}

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

【讨论】：

【解决方案2】：

对于未来的读者，Trustpilot 现在有一个单页应用程序文档，您可以找到 here

我想知道为什么即使使用他们的官方文档也没有呈现任何内容，但经过 2 个小时的痛苦后，我发现（在我写这篇文章的时候）你无法在 Brave 导航器上加载他们的小部件......

【讨论】：