如何在React组件内调用外部支付库的回调函数并触发成功弹窗

你在index.html全局定义的回调函数默认挂载在window对象上，要和React组件内逻辑打通可以用以下两种方案：

方案1：组件内重写全局回调（无需修改原有全局代码） #

在支付相关的React组件内通过useEffect在挂载时重写全局回调，关联组件内的状态逻辑，卸载时恢复原有回调避免全局污染：

import { useState, useEffect } from 'react';
// 可替换为你项目内的弹窗组件
import { Modal } from 'antd';

const PaymentPage = () => {
  // 控制支付成功弹窗显隐的状态
  const [showSuccessModal, setShowSuccessModal] = useState(false);
  // 其他支付状态可按需定义
  const [paymentError, setPaymentError] = useState(null);

  useEffect(() => {
    // 缓存原有全局回调，卸载时恢复
    const originCallbacks = {
      error: window.errorCallback,
      cancel: window.cancelCallback,
      complete: window.completeCallback,
      timeout: window.timeoutCallback
    };

    // 重写回调绑定组件逻辑
    window.errorCallback = (error) => {
      originCallbacks.error(error);
      setPaymentError(error);
    };

    window.cancelCallback = () => {
      originCallbacks.cancel();
      // 可按需添加取消支付的提示逻辑
    };

    window.completeCallback = () => {
      originCallbacks.complete();
      // 触发支付成功弹窗
      setShowSuccessModal(true);
    };

    window.timeoutCallback = () => {
      originCallbacks.timeout();
      // 可按需添加支付超时的提示逻辑
    };

    // 组件卸载时恢复原全局回调，避免内存泄漏
    return () => {
      window.errorCallback = originCallbacks.error;
      window.cancelCallback = originCallbacks.cancel;
      window.completeCallback = originCallbacks.complete;
      window.timeoutCallback = originCallbacks.timeout;
    };
  }, []);

  return (
    <div>
      {/* 页面原有业务逻辑 */}
      <Modal
        title="支付成功"
        open={showSuccessModal}
        onOk={() => setShowSuccessModal(false)}
        onCancel={() => setShowSuccessModal(false)}
      >
        您的订单已支付完成，请后续留意订单状态。
      </Modal>
    </div>
  );
};

export default PaymentPage;

方案2：自定义事件通信（耦合度更低） #

先修改index.html内的全局回调，触发对应自定义事件：

<script type="text/javascript">
    function errorCallback(error) {
      console.log(JSON.stringify(error));
      window.dispatchEvent(new CustomEvent('payment:error', { detail: error }));
    }
    function cancelCallback() {
      console.log('Payment cancelled');
      window.dispatchEvent(new CustomEvent('payment:cancel'));
    }
    function completeCallback() {
      console.log('Payment complete');
      window.dispatchEvent(new CustomEvent('payment:complete'));
    }
    function timeoutCallback() {
      console.log("Timeout")
      window.dispatchEvent(new CustomEvent('payment:timeout'));
    }
  </script>

之后在React组件内监听对应的自定义事件即可：

useEffect(() => {
  // 支付成功事件处理
  const handlePaymentComplete = () => setShowSuccessModal(true);
  // 其他事件处理可按需定义
  const handlePaymentError = (e) => setPaymentError(e.detail);

  // 绑定事件监听
  window.addEventListener('payment:complete', handlePaymentComplete);
  window.addEventListener('payment:error', handlePaymentError);
  window.addEventListener('payment:cancel', /* 对应处理函数 */);
  window.addEventListener('payment:timeout', /* 对应处理函数 */);

  // 解绑事件避免内存泄漏
  return () => {
    window.removeEventListener('payment:complete', handlePaymentComplete);
    window.removeEventListener('payment:error', handlePaymentError);
    // 其他事件解绑
  };
}, []);

内容的提问来源于stack exchange，提问作者Hussein Saad