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

【问题标题】：How to import script tag with data attribute in React?如何在 React 中导入带有数据属性的脚本标签？
【发布时间】：2021-04-04 00:09:00
【问题描述】：

我想在 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

【问题讨论】：

应该是 .querySelector('#home') 而不是 .querySelector('#home form')，最好在 headers 中附加脚本
使用setAttribute函数--> script.setAttribute('data-payment_button_id', 'pl_G8bIDza4zHQRfm');

标签： reactjs use-effect razorpay script-tag

【解决方案1】：

如果你想设置data-attribute你可以使用Element.setAttribute():

script.setAttribute('data-payment_button_id', 'pl_G8bIDza4zHQRfm');

我建议您使用useRef 钩子并获取表单参考：

const form = useRef(null);

useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://checkout.razorpay.com/v1/payment-button.js';
    script.setAttribute('data-payment_button_id', 'pl_G8bIDza4zHQRfm');
    script.async = true;
    
    form.current.appendChild(script);

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

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

【讨论】：