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

Я хочу импортировать кнопку 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/donations/#step-3-embed-payment-button-code-in-website

должно быть .querySelector('#home'), а не .querySelector('#home form'), и лучше добавить скрипт в заголовки

— 26.12.2020 18:30

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

— 26.12.2020 21:56

reactjs use-effect razorpay script-tag

26.12.2020 14:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 214

Перейти к ответу Данный вопрос помечен как решенный

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

26.12.2020 21:58

Другие вопросы по теме

Использование useRef addEventListener

Состояние редукции useEffect изменилось, но данные не отображаются

Как получать события SocketIO в React при использовании состояний

Использование useEffect с useLocation

React js: синхронно запускайте эффекты (useEffect) с общими проблемами

Каковы последствия использования дополнительных зависимостей в useEffect?

Бесконечный цикл при вставке в массив с помощью UseState()?

React Hooks — проблема с useEffect и onClick

Хук Reactjs useState не обновляется для данных обещания

Как сбросить состояние хука React с помощью setTimeout в useEffect

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

Ответы 1

Другие вопросы по теме

Похожие вопросы