如何正确地将外部脚本添加到 Gatsby.js 项目中的 ReactJS 组件？答案

【问题标题】：How to correctly add an external script to a ReactJS component in Gatsby.js project?如何正确地将外部脚本添加到 Gatsby.js 项目中的 ReactJS 组件？
【发布时间】：2020-08-18 17:08:55
【问题描述】：

我正在尝试将 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 脚本会消失吗？如何正确加载它以使其保持不变？

【问题讨论】：

标签： javascript reactjs gatsby react-helmet

【解决方案1】：

当您离开时，父组件正在卸载，Helmet 会从 head 中删除相应的 script 标记。为避免这种情况，请将组件放在页面组件上方，例如根据需要使用wrapPageElement 或wrapRootElement。
将代码注入 DOM 的幼稚脚本会出现问题。 React has some notes and tips on this in the documentation。通常我会搜索供应商是否有任何关于与单页应用程序集成的文档。如果没有，您可能需要进行一些代码探索，以找出如何在约束范围内最好地支持所需的功能。

【讨论】：

wrapPageElement 将页面元素包装在另一个 html 元素中，如果我理解它更正的话。就像在布局中包装页面一样。我的问题有点不同，因为我需要添加一个脚本，所以我不知道要包装什么。
wrapPageElement 包装在一个 React 组件中，它可以是一个 React 元素（即 HTML 元素）或自定义组件。你可能想要后者，你可以用你的脚本和 element 属性返回一个数组，或者你可以使用 React Fragment 来包装两者。