javascript - 页面更改时未加载外部脚本

Question

我正在尝试将 Trustpilot 小部件添加到我的 Gatsby.js 网站。需要从 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>

脚本似乎在我最初加载页面时加载。一旦我导航到不同的页面，样式就会消失。当我重新加载时，它又回来了。

我尝试在 componentDidMount() 中添加脚本

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

Answer 1

如果您希望您的脚本(或任何其他组件)在您的站点中持久存在，您需要使用 wrapPageElement或 wrapRootElement蜜蜂。两个API都建议放在gatsby-browser.js中以及 gatsby-ssr.js

免责声明:componentDidMount()每次加载 DOM 树时都会触发，它不适用于您的用例。

这里的问题是您添加的是非 React Assets ，而不是组件。你可以试试:

export const wrapPageElement = ({ element, props }) => {
  return <SomeWrapper {...props}>{element}</SomeWrapper>;
};

然后，创建一个名为 SomeWrapper 的组件并放置您的 <Helmet> :

const SomeWrapper = (props) =>{
 return <div>
           <Helmet>
             <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async /> 
          </Helmet>
          {props.children}
    </div>
}