React中Stripe Elements：如何从子组件获取Stripe数据？

我明白你遇到的问题了——你把支付表单放在子组件_CardForm里，想用父组件Checkout处理支付逻辑，但injectStripe注入的stripe实例只能在子组件的props里拿到，父组件直接访问肯定是undefined。

问题根源 #

injectStripe这个高阶组件的作用是把Stripe实例注入到被包装的组件（也就是你的_CardForm）的props中，而不是父组件。所以父组件Checkout里的this.props.stripe自然拿不到任何值。

正确的实现方式 #

我们可以把支付的核心操作放在子组件里完成，然后通过回调函数把结果传递给父组件，让父组件处理后续的业务逻辑（比如和后端交互完成支付）。修改后的代码如下：

const { CardElement, StripeProvider, Elements, injectStripe } = ReactStripeElements

class _CardForm extends React.Component {
  // 处理表单提交逻辑
  handleSubmit = async (event) => {
    event.preventDefault();
    
    // 子组件可以直接从props拿到stripe实例（因为被injectStripe包装了）
    const { stripe } = this.props;
    if (!stripe) {
      console.warn('Stripe instance not available');
      return;
    }

    try {
      // 调用Stripe的createToken方法获取支付令牌
      const payload = await stripe.createToken();
      // 将结果传给父组件的回调函数
      this.props.onPaymentSuccess(payload);
    } catch (error) {
      console.error('Payment failed:', error);
      // 把错误也传给父组件处理
      this.props.onPaymentError(error);
    }
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <CardElement />
        <button>Pay</button>
      </form>
    )
  }
}
// 用injectStripe包装子组件，注入stripe实例
const CardForm = injectStripe(_CardForm)

class Checkout extends React.Component {
  // 支付成功后的逻辑
  handlePaymentSuccess = (payload) => {
    console.log('Payment token received:', payload);
    // 这里可以调用你的后端API，完成最终的支付流程
    // fetch('/api/charge', { method: 'POST', body: JSON.stringify(payload) })
  }

  // 支付失败后的错误处理
  handlePaymentError = (error) => {
    // 提示用户支付失败，展示错误信息
    alert(`Payment failed: ${error.message}`);
  }

  render() {
    return (
      <div className="Checkout">
        <h1>Available Elements</h1>
        <Elements>
          {/* 把父组件的回调函数传给子组件 */}
          <CardForm 
            onPaymentSuccess={this.handlePaymentSuccess} 
            onPaymentError={this.handlePaymentError} 
          />
        </Elements>
      </div>
    )
  }
}

const App = () => {
  return (
    <StripeProvider apiKey="pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ">
      <Checkout />
    </StripeProvider>
  )
}

ReactDOM.render(<App />, document.querySelector('.App'))

为什么这样可行？ #

1. injectStripe确保_CardForm能拿到合法的Stripe实例，我们在子组件里完成和Stripe的核心交互（比如创建令牌）。
2. 通过回调函数onPaymentSuccess和onPaymentError，子组件把支付结果传递给父组件，父组件可以专注于业务逻辑（比如和后端通信）。
3. 这种方式符合React的数据流原则：数据和操作逻辑在合适的组件里处理，通过props传递回调来实现父子组件的通信。

内容的提问来源于stack exchange，提问作者Skate to Eat