Блог

Главная - Вопросы по программированию - Как импортировать тег скрипта с атрибутом данных в React?

Как импортировать тег скрипта с атрибутом данных в React?

#reactjs #use-effect #razorpay #script-tag

#reactjs #использование-эффект #razorpay #скрипт-тег

Вопрос:

Я хочу импортировать кнопку Razorpay в React, чтобы я мог принимать платежи. Но он не отображается в моем компоненте.

Код кнопки 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/пожертвования / #шаг 3-встраивание кода кнопки оплаты на веб-сайте

Комментарии:

1. должно быть . querySelector(‘#home’) нет . querySelector(‘#домашняя форма’), и лучше добавить скрипт в заголовки

2. Используйте функцию setAttribute—> script.setAttribute(‘data-payment_button_id’, ‘pl_G8bIDza4zHQRfm’);

Ответ №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>
  );