如何在 React 中导入具有数据属性的脚本标签？

问题描述

我想在 React 中导入 Razorpay 按钮，以便我可以接受付款。但它没有显示在我的组件中。

Razorpay 按钮代码：-

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

我已经尝试过这样做但失败了：-

import React,{ useEffect } from 'react';
import './Homepage.css';

const Homepage = () => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = 'https://checkout.razorpay.com/v1/payment-button.js';
    script['data-payment_button_id'] = 'pl_G8bIDza4zHQRfm';
    script.async = true;
    const element = document.querySelector('#home form');
    element.appendChild(script);

    return () => {
      element.removeChild(script);
    };
  },[]);

  return (
    <section id='home'>
      <form></form>
    </section>
  );
};

export default Homepage;

文档参考：- https://razorpay.com/docs/payment-button/donations/#step-3-embed-payment-button-code-in-website

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）