在 React.js 中从 HTML <script> 标签插入按钮答案

【问题标题】：Inserting button from HTML <script> tag in React.js在 React.js 中从 HTML <script> 标签插入按钮
【发布时间】：2020-12-28 04:48:16
【问题描述】：

我正在尝试使用并非专门为 React 设计的本地公司的支付网关 API，而是提供了一个通用 HTML 片段，该片段插入一个按钮以继续他们的结帐页面，在我的网站外部.

这是 HTML 片段：

<form action="https://www.example.com/paymentsuccess" method="POST">
  <script
    src="https://www.mercadopago.com.ar/integrations/v1/web-tokenize-checkout.js"
    data-public-key="ENV_PUBLIC_KEY"
    data-transaction-amount="100.00">
  </script>
</form>

在客户输入卡的信息（在我的站点之外）后，他们的 API 会向我的 Node 后端服务器（在“action”属性处）发送一个 POST，以向我提供确认付款所需的一些安全信息。

我没有考虑将它粘贴到公用文件夹中，因为它实际上呈现了一个按钮以将用户重定向到外部页面，并且按钮的位置很关键。

这可能是一个太简单的问题，但我是 React 的新手，如何在我的前端应用程序中插入这个片段/按钮，并通过它的属性（公钥/交易金额）获得所需的信息？

我们非常感谢任何能指导我正确方向的帮助。

【问题讨论】：

您拥有的代码有什么问题？我不清楚为什么这不起作用。
将片段粘贴到一些 React 组件（如 app.js）中不起作用，因为它不会加载按钮。据我所知，它不需要
澄清一下，片段从一个永恒的 .js 文件加载按钮，如 src 属性中所述。

标签： javascript reactjs

【解决方案1】：

以下是如何将按钮呈现为 React 组件

    function PaymentForm (props) {
      const paymentForm = React.useRef(null);
      React.useEffect(() => {
      const script = document.createElement("script");
      script.src = "https://www.mercadopago.com.ar/integrations/v1/web-tokenize-checkout.js";
      script.setAttribute('data-public-key',"ENV_PUBLIC_KEY")
      script.setAttribute('data-transaction-amount',"100.00")
        console.log(paymentForm.current)
      paymentForm.current.appendChild(script)
    }, []);

    return (
       <form action="https://www.example.com/paymentsuccess" method="POST" ref={paymentForm}></form>);
    }

请注意，它会在组件挂载时加载一次脚本。根据您的情况，您可能希望在金额值更改时重新渲染按钮，在这种情况下，将其作为条件添加到 useEffect（您可能需要删除前一个）。

【讨论】：