Как я могу поместить код Javascript в компонент React? - PullRequest
Новая
       1

Как я могу поместить код Javascript в компонент React?

0 голосов
/ 02 июня 2019

Как я могу поместить этот кусок кода только в один из моих компонентов React? 


<!--
  Create a button that your customers click to complete their purchase. Customize the styling to suit your branding.
-->
<button
  style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
  id="checkout-button-sku_FAe7tbPK29byHW"
  role="link"
>
  Checkout
</button>

<div id="error-message"></div>

<script>
  var stripe = Stripe("pk_live_5PjwBk9dSdW7htTKHQ3HKrTd");
  var checkoutButton = document.getElementById(
    "checkout-button-sku_FAe7tbPK29byHW"
  );
  checkoutButton.addEventListener("click", function() {
    stripe
      .redirectToCheckout({
        items: [{ sku: "sku_FAe7tbPK29byHW", quantity: 1 }],
        successUrl:
          window.location.protocol + "//www.jobdirecto.com/jobConfirm",
        cancelUrl: window.location.protocol + "//www.jobdirecto.com/errorPage"
      })
      .then(function(result) {
        if (result.error) {
          var displayError = document.getElementById("error-message");
          displayError.textContent = result.error.message;
        }
      });
  });
</script>

На данный момент он находится в index.js (где находятся все остальные теги скрипта) и работает правильно, но он появляется на всех страницах.Я хочу, чтобы он появлялся только в одном компоненте, но я не уверен, куда его поместить.

Должен ли я создать функцию и поместить туда?или я должен поместить это как-то ниже части рендера?

1 Ответ

1 голос
/ 02 июня 2019

Чтобы сделать его компонентом React, он должен выглядеть примерно так: 

import React, { useState } from 'react';

function Button() {
  const stripe = Stripe('pk_live_5PjwBk9dSdW7htTKHQ3HKrTd');

  const [error, setError] = useState();

  const handleClick = () => {
    stripe
      .redirectToCheckout({
        items: [{ sku: 'sku_FAe7tbPK29byHW', quantity: 1 }],
        successUrl: window.location.protocol + '//www.jobdirecto.com/jobConfirm',
        cancelUrl: window.location.protocol + '//www.jobdirecto.com/errorPage'
      }).then((result) => {
        if (result.error) {
          setError(result.error.message);
        }
      });
  }

  return (
    <div>
      <button onClick={handleClick}>Checkout</button>
      {!!error && <div>{error}</div>}
    </div>
  );
}

export default Button;

Надеюсь, он вам поможет.

...