如何将 Pixlee Social Feed 添加到 React 应用程序？

Question

我使用 Pixlee 为我的 Instagram 创建了一个社交提要，并获得了一个示例用于我的页面，如下所示：

<div id="pixlee_container"></div>
<script type="text/javascript">window.PixleeAsyncInit = function() {Pixlee.init({apiKey:'ThisIsASecretApiKey'});Pixlee.addSimpleWidget({widgetId:'32861'});};</script>
<script src="//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js"></script>

如何将其合并到反应页面中？ 如何在 React 上下文中加载和执行脚本标签中的内容？

编辑：
我发现我可以使用<Helmet>在 React 组件中包含脚本，如下所示：

<Helmet>
  <script type="text/javascript">window.PixleeAsyncInit = function() {Pixlee.init({apiKey:'ThisIsASecretApiKey'});Pixlee.addSimpleWidget({widgetId:'32861'});};</script>
  <script src="//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js"></script>
</Helmet>

这样做我得到一个错误的第一个脚本标签说：
C:\utveckling\blog\src\pages\instagram.tsx: Unexpected token, expected "}" (18:122)

Answer 1

我通过将脚本部分放在useEffect标记中找到了一个解决方案，如下所示：

const InstagramFeed = (): JSX.Element => {

  // Init Pixlee Social Feed
  useEffect(() => {
    window.PixleeAsyncInit = function() {
      Pixlee.init({ apiKey: "ThisIsASecretApiKey" })
      Pixlee.addSimpleWidget({ widgetId: "32861" })
    }

    const scriptTag = document.createElement("script")
    scriptTag.src =
      "//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js"
    document.body.appendChild(scriptTag)
  }, [])

  return (
    <>
    <div id="pixlee_container" />
    </>
  )
}

Answer 2

您应该将脚本添加到您的公共文件夹中的index.html和您div的任何组件中。 请参阅此 CodeSandbox： https://codesandbox.io/s/mystifying-tdd-3x6pn?file=/public/index.html:587-606

如果您在脚本 function 中设置密钥，它应该可以工作。