come posso inserire codice Javascript in un componente di React?

come posso inserire questo codice in uno solo dei miei componenti 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>

al momento è in index.js (dove tutti gli altri tag dello script sono) e funziona correttamente, ma appare in tutte le pagine. voglio che appaia solo in un componente ma non so dove metterlo.

devo creare una funzione e inserirla? o dovrei metterlo in qualche modo sotto la parte di rendering?

EN From: How can I put Javascript code into a component of React?

More similar articles:

2 Comments

  1. non si aggiunge così come è, si dovrebbe implementare un gestore di clic come una funzione di componente vincolato e aggiornare lo stato in modo appropriato. “dove” è in gran parte irrilevante, anche se mi piacerebbe mantenere la funzionalità separata dalla funzionalità dei componenti per facilitare il test e la modifica.

  2. per fare che un componente React diventerebbe qualcosa come questo:

    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>
          <div>{error}</div>
        </div>
      );
    }
    
    export default Button;

    spero che ti aiuti.

Leave a Reply

Your email address will not be published. Required fields are marked *