条纹注入组件的打字道具

时间:2019-09-29 17:59:51

标签: reactjs typescript stripe-payments

我在输入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

1 个答案:

答案 0 :(得分:1)

ReactStripeElements导入命名空间react-stripe-elements

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

然后您可以引用该界面:

ReactStripeElements.StripeProps