如何在React组件中正确渲染JavaScript版PayPal按钮？

问题背景 #

我可以通过以下JavaScript代码创建基于JavaScript的PayPal购买按钮（未展示API密钥src变量）：

paypal.Buttons().render('#paypal-button-container');
paypal.Buttons({
  createOrder: function (data, actions) {
    // 此函数设置交易详情，包括金额和订单项详情。
    return actions.order.create({
      purchase_units: [{
        amount: {
          value: '0.01'
        }
      }]
    });
  }
}).render('#paypal-button-container');
paypal.Buttons({
  createOrder: function (data, actions) {
    // 此函数设置交易详情，包括金额和订单项详情。
    return actions.order.create({
      purchase_units: [{
        amount: {
          value: '0.01'
        }
      }]
    });
  },
  onApprove: function (data, actions) {
    // 此函数捕获交易资金。
    return actions.order.capture().then(function (details) {
      // 此函数向买家显示交易成功消息。
      alert('交易完成，感谢 ' + details.payer.name.given_name);
    });
  }
}).render('#paypal-button-container');

当前我的React组件render函数代码如下：

render() {
  return (
    <>
      <button className="empty-cart-button" onClick={this.handleEmptyCart}>Empty Cart</button>
      <div className="paypal-buttons-container">
        <div id="paypal-button"></div>
      </div>
    </>
  );
}

请问如何在React的render函数中正确渲染这些PayPal按钮？

实现方案 #

1. 类组件版本适配 #

React的render仅负责输出JSX结构，直接在此调用PayPal API会因DOM未就绪或重复渲染导致异常。需通过生命周期方法控制PayPal按钮的初始化、更新与清理：

class CartComponent extends React.Component {
  paypalButtonInstance = null;

  // 组件挂载后初始化PayPal按钮
  componentDidMount() {
    this.renderPayPalButton();
  }

  // 关键数据变化时更新按钮（比如购物车总价变动）
  componentDidUpdate(prevProps) {
    if (prevProps.cartTotal !== this.props.cartTotal) {
      this.paypalButtonInstance?.close();
      this.renderPayPalButton();
    }
  }

  // 组件卸载时清理实例，避免内存泄漏
  componentWillUnmount() {
    this.paypalButtonInstance?.close();
  }

  // 封装PayPal按钮渲染逻辑
  renderPayPalButton() {
    this.paypalButtonInstance = paypal.Buttons({
      createOrder: (data, actions) => {
        return actions.order.create({
          purchase_units: [{
            amount: {
              value: this.props.cartTotal || '0.01' // 支持动态金额
            }
          }]
        });
      },
      onApprove: (data, actions) => {
        return actions.order.capture().then(details => {
          alert('交易完成，感谢 ' + details.payer.name.given_name);
          // 可在此添加订单状态更新、清空购物车等逻辑
          this.handleEmptyCart();
        });
      }
    }).render('#paypal-button');
  }

  handleEmptyCart = () => {
    // 你的清空购物车逻辑
  }

  render() {
    return (
      <>
        <button className="empty-cart-button" onClick={this.handleEmptyCart}>清空购物车</button>
        <div className="paypal-buttons-container">
          <div id="paypal-button"></div>
        </div>
      </>
    );
  }
}

2. 函数组件版本适配（可选） #

如果使用函数组件，可通过useEffect和useRef替代生命周期方法：

import { useEffect, useRef } from 'react';

const CartComponent = ({ cartTotal, handleEmptyCart }) => {
  const paypalButtonContainer = useRef(null);
  const paypalInstance = useRef(null);

  useEffect(() => {
    // 清理旧实例
    if (paypalInstance.current) {
      paypalInstance.current.close();
    }

    // 渲染新按钮
    paypalInstance.current = paypal.Buttons({
      createOrder: (data, actions) => {
        return actions.order.create({
          purchase_units: [{
            amount: {
              value: cartTotal || '0.01'
            }
          }]
        });
      },
      onApprove: (data, actions) => {
        return actions.order.capture().then(details => {
          alert('交易完成，感谢 ' + details.payer.name.given_name);
          handleEmptyCart();
        });
      }
    }).render(paypalButtonContainer.current);

    // 组件卸载时清理
    return () => paypalInstance.current?.close();
  }, [cartTotal]); // 依赖cartTotal，金额变化时自动更新按钮

  return (
    <>
      <button className="empty-cart-button" onClick={handleEmptyCart}>清空购物车</button>
      <div className="paypal-buttons-container">
        <div ref={paypalButtonContainer}></div>
      </div>
    </>
  );
};

3. 核心注意事项 #

• DOM就绪后初始化：必须在组件挂载完成后调用PayPal的render方法，确保目标容器已存在于DOM中。
• 实例清理：更新或卸载组件时，调用close()销毁旧实例，避免重复渲染和内存泄漏。
• 动态数据支持：将订单金额与组件props绑定，实现数据变化时自动更新按钮配置。
• SDK引入：确保已在项目中正确引入PayPal SDK脚本（示例：在public/index.html中添加）：

  <script src="https://www.paypal.com/sdk/js?client-id=你的API密钥"></script>
  

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