如何在 React with Hooks 中使用嵌入代码答案

【问题标题】：How do I use Embed Code in React with Hooks如何在 React with Hooks 中使用嵌入代码
【发布时间】：2020-07-10 02:12:47
【问题描述】：

我需要将以下嵌入代码集成到我的 React 应用程序中（使用挂钩）：

<script 
class="123abc" 
type="text/javascript" 
src="https://cdn2.fake.com/Scripts/embed-button.min.js" 
data-encoded="lsakjdfioejfklsdKLJFLDSidjfklJSDJfLFKJEI88DdfDF8Ad9sa7">
</script>

我该怎么做呢？我找到的资源似乎不允许我实现数据编码部分...

基于Adding script tag to React/JSX，您可以看到答案有一个 useEffect & hooks 解决方案，但我不知道如何实现数据编码部分（或相关的类部分）。

【问题讨论】：

标签： javascript reactjs react-hooks embed

【解决方案1】：

你可以创建一个门户来添加一个脚本块，而不是直接从你的 react 脚本中改变 DOM！

【讨论】：

好的。我如何....创建一个门户？以前从未听说过。
:))) 不要生气，这是你拯救的链接：reactjs.org/docs/portals.html
谢谢你！绝对不生气哈哈。我会做一些阅读，谢谢！

【解决方案2】：

编辑文档的 head 通常使用react-helmet。

支持所有有效的头部标签：title、base、meta、link、script、noscript 和 style 标签。

【讨论】：

感谢 Dennis，但我要修改的不是文档头。我想将财务合作伙伴的嵌入按钮插入到我的反应应用程序中的组件中，以便按钮呈现。 react-helmet 会做到这一点吗？
您将脚本添加到文档头部，是的 react-helmet 会这样做 - 阅读文档
我已阅读文档（非常混乱），但没有任何成功。我将 Next.js 用于 SSR，所以也许这就是问题所在。但显然只导入import { Helmet } from "react-helmet"; 然后执行<Helmet><script ....></script></Helmet> 是行不通的。
Next.js有自己的head管理系统，就是next/head，和react-helmet差不多。
考虑只问另一个问题并支持对您有帮助的答案。

【解决方案3】：

这个怎么样：

componentDidMount () {
    const script = document.createElement("script");
    script.src = "https://cdn2.fake.com/Scripts/embed-button.min.js";
    script.async = true;

    document.body.appendChild(script);
}

【讨论】：

感谢@jon-jones，但我正在使用 React Hooks（即 ComponentDidMount 不是一个东西）。这就是我被卡住的部分原因。请参阅：stackoverflow.com/questions/34424845/… 他们使用您提供的代码的地方，然后将其更新为使用钩子。但是，在钩子示例中，我不知道如何访问数据编码...