Stripe 注入组件的打字道具

Question

我在输入this.props.stripe. 我不确定我需要把什么类型放在那里。

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-stripe-elements/index.d.ts#L44

@types/react-stripe-elements 已安装。

        <StripeProvider apiKey="xxx">
            <div className="example">
                <h1>React Stripe Elements Example</h1>
                <Elements>
                    <CheckoutForm />
                </Elements>
            </div>
        </StripeProvider>

import React from 'react';
import {CardElement, injectStripe } from 'react-stripe-elements';

type CheckoutFormProps = {
  stripe: StripeProps
}

class CheckoutForm extends React.Component<CheckoutFormProps, {}> {
  submit = async (ev: React.SyntheticEvent) => {
    // User clicked submit
    let {token} = await this.props.stripe.createToken({name: "Name"});
    console.log(token);
  }

  render() {
    return (
      <div className="checkout">
        <p>Would you like to complete the purchase?</p>
        <CardElement />
        <button onClick={this.submit}>Purchase</button>
      </div>
    );
  }
}

export default injectStripe(CheckoutForm);

错误： Cannot find name 'StripeProps.

我也试过了InjectedStripeProps。

Answer 1

导入命名空间ReactStripeElements来自react-stripe-elements：

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

然后就可以引用接口了：

ReactStripeElements.StripeProps