带有反应条纹元素的打字稿不会通过注入的道具 [英] Typescript with react-stripe-elements does not pass injected props

问题描述

这是与 Stripe 相关的代码.

根据我从错误中的理解，TypeScript 认为 CheckoutForm requiresstripe 道具，但它不是通过 InjectedCheckoutForm 组件.

另一方面，injectStripe 应该将 props stripe 和 elements 注入到 elements 的子组件中.https://github.com/stripe/react-stripe-elements#setting-up-your-payment-form-injectstripe

type CreditCardProps = {秘密:字符串}功能 StripeSection(道具:CreditCardProps){const { 秘密 } = 道具返回 (<StripeProvider apiKey=pk_test_..."><元素><InjectedCheckoutForm secret={secret}/></元素></StripeProvider>)}类型 CheckoutFormProps = {条纹:ReactStripeElements.StripeProps秘密:字符串}函数 CheckoutForm(props: CheckoutFormProps) {const { 条纹，秘密 } = 道具const handleSubmit = 异步 (事件:React.FormEvent): Promise=>{event.preventDefault()const 结果 = await stripe.confirmCardSetup(secret, {})}返回 (<form className="form";onSubmit={handleSubmit}><卡片部分/><按钮>提交</表单>)}const InjectedCheckoutForm = injectStripe(CheckoutForm)功能 CardSection() {返回 (<div><label>卡片详情</label><卡片元素style={{ base: { fontSize: '18px', backgroundColor: 'white' } }}/>

)}

我收到以下错误:

类型{secret: string;"中缺少属性stripe"}' 但在'CheckoutFormProps'类型中是必需的.

解决方案

现在 InjectedCheckoutForm 组件的最终类型定义将是:

const InjectedCheckoutForm: React.ComponentType

问题的出现是因为 InjectedCheckoutForm 本身不期望 stripe 道具 - 因为它正在将该道具注入其子级(即 CheckoutFormComponent)

修复方法是为 InjectedCheckoutForm 组件定义预期的类型，并将它们作为类型参数传入，如下所示:

const InjectedCheckoutForm = injectStripe<{​​secret: string }>(CheckoutForm);

这将导致 InjectedCheckoutForm 的类型定义如下:

const InjectedCheckoutForm: React.ComponentType<{秘密:字符串；}>

该组件接收您编写的密码，然后将条带注入 CheckoutForm 组件并沿密码转发！

Here is code relevant for Stripe.

From what I understand from the error TypeScript thinks CheckoutForm requiresstripe prop, but it is not provided through InjectedCheckoutForm component.

On other hand injectStripe should inject props stripe and elements to wrapped component that is child of elements. https://github.com/stripe/react-stripe-elements#setting-up-your-payment-form-injectstripe

type CreditCardProps = {
  secret: string
}

function StripeSection(props: CreditCardProps) {
  const { secret } = props

  return (
    <StripeProvider apiKey="pk_test_...">
      <Elements>
        <InjectedCheckoutForm secret={secret} />
      </Elements>
    </StripeProvider>
  )
}

type CheckoutFormProps = {
  stripe: ReactStripeElements.StripeProps
  secret: string
}

function CheckoutForm(props: CheckoutFormProps) {
  const { stripe, secret } = props
  const handleSubmit = async (
    event: React.FormEvent<HTMLFormElement>
  ): Promise<void> => {
    event.preventDefault()

    const result = await stripe.confirmCardSetup(secret, {})
  }

  return (
    <form className="form" onSubmit={handleSubmit}>
      <CardSection />
      <button>Submit</button>
    </form>
  )
}

const InjectedCheckoutForm = injectStripe(CheckoutForm)

function CardSection() {
  return (
    <div>
      <label>Card details</label>
      <CardElement
        style={{ base: { fontSize: '18px', backgroundColor: 'white' } }}
      />
    </div>
  )
}

I receive the following error:

Property 'stripe' is missing in type '{ secret: string; }' but required in type 'CheckoutFormProps'.

解决方案

Right now the resulting type definition for the InjectedCheckoutForm component would be:

const InjectedCheckoutForm: React.ComponentType<CheckoutFormProps>

The issue arises because the InjectedCheckoutForm itself doesn't expect a stripe prop - since its the one that's injecting that prop into its child (i.e., the CheckoutFormComponent)

The fix would be to define the expected types for the InjectedCheckoutForm component and pass them in as a type argument like so:

const InjectedCheckoutForm = injectStripe<{ secret: string }>(CheckoutForm);

Which would result in a type definition for InjectedCheckoutForm like:

const InjectedCheckoutForm: React.ComponentType<{
  secret: string;
}>

That component takes in a secret as you've written, it injects stripe into it the CheckoutForm component and forwards along the secret!

这篇关于带有反应条纹元素的打字稿不会通过注入的道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！