如何将 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 页面中？如何在 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

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

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

Answer 2

我通过将脚本部分放在 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" />
    </>
  )
}

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

How to add Pixlee Social Feed to a React application?

javascript

reactjs

instagram