reactjs - 如何为react-stripe-elements创建useStripe钩子(Hook)

Question

Stripe有react-stripe-elements，它提供了injectStripe HOC。现在已经是 2019 年了，HOC 不再那么酷了。 Stripe 似乎并不着急，我想这是因为他们想支持旧版本的 React，所以只考虑最低公分母解决方案。

我正在寻找一种通过钩子(Hook)(而不是由 injectStripe 提供的 prop)获取 stripe 的方法。

用法如下const stripe = useStripe()以便稍后我可以使用 stripe.handleCardSetup 和其他 API 方法

import { CardElement } from 'react-stripe-elements'

const CardForm = ({secret}) => {
  const stripe = useStripe()

  const handleSubmit = async () => {
    const { setupIntent, error } = await stripe.handleCardSetup(secret)
    // ...
  }

  return (
    <>
      <CardElement />
      <button onClick={handleSubmit} />
    </>
  )
}

您将如何从现有 API 和组件中定义 useStripe Hook ？stripe 应该与使用 injectStripe 钩子(Hook)时得到的结果相同

GH 上的相关问题:API Review: Hooks & Beyond

Answer 1

经过一系列的尝试和错误，我最终得到了这个，这非常简单。这里是供 Stripe 窥视者领养以及其他需要的人useStripe钩子(Hook)

// StripeHookProvider.jsx

import React, { useContext, createContext } from 'react'
import { injectStripe } from 'react-stripe-elements'

const Context = createContext()

export const useStripe = () => useContext(Context)

const HookProvider = ({ children, stripe }) => {
  return <Context.Provider value={stripe}>{children}</Context.Provider>
}

export default injectStripe(HookProvider)

导入并添加StripeHookProvider像这样的组件层次结构。注意:因为它依赖 injectStripe ，它必须是 <Elements> 的子项

    <StripeProvider {...{ stripe }}>
      <Elements>
        <StripeHookProvider>
          <MyForm />
        </StripeHookProvider>
      </Elements>
    </StripeProvider>

然后在 MyForm 中像这样使用它

// MyForm.jsx
import { useStripe } from './StripeHookProvider'

const MyForm = () => {
  const stripe = useStripe()

  const handleSubmit = () => {
    const { setupIntent, error } = await stripe.handleCardSetup(secret ... // and so on
  }
}

这样你只需要做 injectStripe放在一处，并且整齐地藏在看不见的地方。正如您从这段代码中看到的，这不是火箭科学，对于 Stripe 窥视者来说添加到他们的代码中应该没有问题，希望消除 <StripeHookProvider>完全因为他们引用了 stripe对象位于上下文中的某个位置。

我尝试了很多方法，这是唯一有效的方法。我没有深入研究 stripe 的 JS 代码来看看会发生什么，但是stripe你从injectStripe获得是你唯一可以使用的东西。您通过 window.Stripe(apiKey) 设置的那个不一样，它不会工作，因为它没有观察到 <Elements>正确，因此它不知道表单的状态。

也许，原因injectStripe必须用于 <Elements> 的 child 这也是 Stripe 团队花费一段时间来构建这个钩子(Hook)的原因。