reactjs - 将 <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>接近您的网站是完全安全的。

该问题已使用 native iframe 解决。对于这个用例。