如何将 Javascript 代码放入 React 的组件中？答案

【问题标题】：How can I put Javascript code into a component of React?如何将 Javascript 代码放入 React 的组件中？
【发布时间】：2019-10-18 00:37:45
【问题描述】：

我怎样才能把这段代码只放在我的一个 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 中（所有其他脚本标签都在其中）并且它工作正常，但它出现在所有页面中。我希望它只出现在一个组件中，但我不确定放在哪里。

我应该创建一个函数并将其放入其中吗？还是我应该把它放在渲染部分下面？

【问题讨论】：

您不会按原样添加它，而是将单击处理程序实现为绑定的组件函数并适当地更新状态。 “在哪里”在很大程度上无关紧要，尽管我会将功能与组件功能分开以便于测试和修改。

标签： javascript reactjs stripe-payments

【解决方案1】：

要使它成为一个 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;

希望对你有帮助。

【讨论】：