将 <script> 标签嵌入到 React Gatsby 组件中

Question

我正在尝试嵌入 Buzzsprout 提供的播客播放器。这是他们提供的代码。

<div id="buzzsprout-player-61XX09"></div>
<script src="https://www.buzzsprout.com/14XX79/61XX09-the-podcast-promo.js?container_id=buzzsprout-player-61XX09&player=small" type="text/javascript" charset="utf-8"></script>

其目的是在一个页面上拥有多个播放器，即播客剧集列表。但是，上面的代码不适用于 Gatsby 组件。我一直在寻找包含此内容的方法，但无法找到解决方案。

我尝试了以下方法，但这不起作用。

const IndexPage = () => (
<script dangerouslySetInnerHTML={{__html: `src="https://www.buzzsprout.com/14XX79/61XX09-the-podcast-promo.js?container_id=buzzsprout-player-61XX09&player=small" type="text/javascript" charset="utf-8"`}} />
)

花了一些时间尝试其他选项，例如 react-script-tag 包，但使用了不推荐使用的方法并且不起作用。任何帮助都会很棒！

Answer 1

使用<Helmet>组件：

const IndexPage = () => (
<>
  <Helmet>
    <script defer src="https://www.buzzsprout.com/14XX79/61XX09-the-podcast-promo.js?container_id=buzzsprout-player-61XX09&player=small" type="text/javascript" charset="utf-8" />
  </Helmet>
</>
)

基本上，<Helmet>（从react-helmet 导入）组件将包裹在其中的所有内容放入head 标签内。如果需要，您可能想要使用defer 属性（感谢@LekoArts 在https://github.com/gatsbyjs/gatsby/discussions/30752 的参考）。

请记住，使用您的方法，您是 exposing the site to XSS (Cross-Site Scripting) attacks，因为您使用的是 dangerouslySetInnerHtml（因此得名）。如果需要，您可以使用一些 parse libraries 来避免使用它。使用<Helmet> 接近您的网站是完全安全的。

---

这个用例使用原生 iframe 解决了这个问题。