Подключение API с JavaScript на react-app

Question

У меня есть проект на create-react-app. Есть несколько страниц которые находятся в папке /src/components/. На странице Donate.jsx нужно использовать API(виджет) от trademc(хочу сделать донат для игрового сервера).

<script src="https://api.trademc.org/trademcapi.js"></script>
<div id="trademc-buyform"></div>
<script>
  TrademcAPI.GetBuyForm({
    Shop: "186970",
    Title: "Поддержать наш сервер!",
    Nickname: "Введите ваш никнейм",
    Item: "Выберите товар",
    Coupon: "Введите купон, если есть",
    Button: "Продолжить",
    Success_URL: "https://trademc.org",
    Pending_URL: "https://trademc.org",
    Fail_URL: "https://trademc.org",
    PastPlaceID: "trademc-buyform",
  });
</script>

Незнаю как подключить JavaScript на эту страницу, вставить не работает. Пробовал подключить через /public/index.html , работает только тогда когда обновляешь страницу /donate в браузере. А так оно ищет <div id="trademc-buyform"></div> на главной странице и когда переходишь на другую страницу оно не ищет этот div.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://api.trademc.org/trademcapi.js"></script>
    <script>
      TrademcAPI.GetBuyForm({
        Shop: "186970",
        Title: "Поддержать наш сервер!",
        Nickname: "Введите ваш никнейм",
        Item: "Выберите товар",
        Coupon: "Введите купон, если есть",
        Button: "Продолжить",
        Success_URL: "https://trademc.org",
        Pending_URL: "https://trademc.org",
        Fail_URL: "https://trademc.org",
        PastPlaceID: "trademc-buyform",
      });
    </script>
    <meta charset="utf-8" />
    <link rel="icon" href="../src/images/icon.png" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>SoupMine</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Пробовал так, но не работает. Пустота даже Navbar не видно. (без /* global GetBuyForm / говорит no undef...): / global GetBuyForm */

function Donate() {
  GetBuyForm({
    Shop: "186970",
    Title: "Поддержать наш сервер!",
    Nickname: "Введите ваш никнейм",
    Item: "Выберите товар",
    Coupon: "Введите купон, если есть",
    Button: "Продолжить",
    Success_URL: "https://trademc.org",
    Pending_URL: "https://trademc.org",
    Fail_URL: "https://trademc.org",
    PastPlaceID: "trademc-buyform",
  });
  return <div id="trademc-buyform"></div>;
}

export default Donate;

Помогите пожалуйста, как подключить этот виджет только в этой странице, либо как перезапускать JavaScript когда заходишь на другую страницу. Пожалуйста максимально подробно так как я начинающий и много не знаю.

Answer 1

Все оказалось очень просто,второй раз когда пробывал я сделал это немного неправильно. Может кому-то понадобиться это, и кто то не будет как я долго мучаться а быстро найдет мой ответ Вот Donate.jsx:

/* global TrademcAPI */

function Donate() {
  TrademcAPI.GetBuyForm({
    Shop: "186970",
    Title: "Поддержать наш сервер!",
    Nickname: "Введите ваш никнейм",
    Item: "Выберите товар",
    Coupon: "Введите купон, если есть",
    Button: "Продолжить",
    Success_URL: "https://trademc.org",
    Pending_URL: "https://trademc.org",
    Fail_URL: "https://trademc.org",
    PastPlaceID: "trademc-buyform",
  });
  return <div id="trademc-buyform"></div>;
}

export default Donate;

и index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://api.trademc.org/trademcapi.js"></script>
    <meta charset="utf-8" />
    <link rel="icon" href="../src/images/icon.png" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>SoupMine</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

БЛОГ НА HUSL

Подключение API с JavaScript на react-app

Ответы (1 шт):