如何从 <script> 标签呈现表单？答案

【问题标题】：How do I render form from <script> tag?如何从 <script> 标签呈现表单？
【发布时间】：2021-06-27 04:51:43
【问题描述】：

<form>
  <script 
     src="https://checkout.razorpay.com/v1/payment-button.js" 
     data-payment_button_id="pl_GspBivPLMSWeEC"
     async> 
  </script>
</form>

如何在 React 中渲染它？它适用于普通 HTML。

在渲染时，它必须向我显示一个这样的支付按钮：

React 无法渲染它。我该如何解决这个问题？

点击该表单后，它必须显示支付屏幕

【问题讨论】：

标签： javascript reactjs forms razorpay script

【解决方案1】：

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello iFrame</h1>

      <iframe
        frameborder="0"
        scrolling="no"
        style={{ overflow: "hidden", height: "100%", width: "100%" }}
        height="100%"
        title={"test"}
        srcdoc="
      <form>
        <script 
          src='https://checkout.razorpay.com/v1/payment-button.js'
          data-payment_button_id='pl_GspBivPLMSWeEC'
          async> 
        </script>
      </form>
      "
      />
    </div>
  );
}

Demo

【讨论】：

【解决方案2】：

试试这个：

useEffect(() => {
const form = document.createElement("form");
const script = document.createElement("script");

script.src = "https://checkout.razorpay.com/v1/payment-button.js";
script.setAttribute("data-payment_button_id", "pl_GspBivPLMSWeEC");
script.async = true;

form.appendChild(script);
document.body.appendChild(form);

return () => {
  document.body.removeChild(form);
};}, []);

DEMO

【讨论】：