如何正確地將外部腳本添加到 Gatsby.js 項目中的 ReactJS 組件？

Question

我正在嘗試將 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 腳本會消失嗎？ 如何正確加載它以使其保持不變？

Answer 1

1. 當您離開父組件時，正在卸載父組件，並且 Helmet 會從head中刪除相應的script標簽。 為避免這種情況，請將組件放置在頁面組件之上，例如，根據需要使用wrapPageElement或wrapRootElement 。

2. 將代碼注入 DOM 的幼稚腳本會出現問題。 React 在文檔中有一些注釋和提示。 通常我會搜索供應商是否有任何關於與單頁應用程序集成的文檔。 如果沒有，您可能需要進行一些代碼探索，以找出如何在約束范圍內最好地支持所需的功能。