Javascript 如何将Pixlee社交提要添加到React应用程序？

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

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" />
    </>
  )
}

window.pixleasyncinit=function（）{Pixlee.init（{apiKey:'thisissecretapkey'}）；Pixlee.addSimpleWidget（{widgetId:'32861'}）；}；

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

编辑：
我发现我可以使用

在React组件中包含脚本，如下所示：

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" />
    </>
  )
}

window.pixleasyncinit=function（）{Pixlee.init（{apiKey:'thisissecretapkey'}）；Pixlee.addSimpleWidget（{widgetId:'32861'}）；}；

执行此操作时，第一个脚本标记会出现一个错误，即：

---

C:\utveckling\blog\src\pages\instagram.tsx：意外标记，应为“}”（18:122）

您应该将脚本添加到公用文件夹中的

index.html

和

div

任何您想要的组件中。请参阅此代码沙盒：

---

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

我通过将脚本部分放在

useffect

标记中找到了解决方案，如下所示：

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" />
    </>
  )
}

const InstagramFeed=（）：JSX.Element=>{
//Init Pixlee社交订阅源
useffect（（）=>{
window.pixleasyncinit=函数（）{
init（{apiKey:“thisissecretapkey”}）
addSimpleWidget（{widgetId:“32861”}）
}
const scriptTag=document.createElement（“脚本”）
scriptTag.src=
“//instafeed.assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js”
document.body.appendChild（scriptTag）
}, [])
返回(
)
}

如果我在公用文件夹中编辑该文件，我将不得不在每次生成后重做它，或者我在这里遗漏了什么吗？：）不，文件

public/index.html

在每次生成时都不会被覆盖，而是复制到

build

folderI我将盖茨比与React一起使用，因此可能会有所不同。

Public

文件夹是为我提供的，我没有任何

build

文件夹。我不认为这有什么关系，所以在问题中没有提到。你可以在任何地方添加脚本标签，在你的主组件内等等。