如何將 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 中設置密鑰，它應該可以工作。