Reactjs 带React的Stripe JS-找不到元素上下文

我试图使用React组件将Stripe与React结合使用，但是无论我如何构造代码，我总是遇到错误“找不到元素上下文”

我是否在下面的代码中遗漏了任何明显的内容

“ModelSubscriptionForm”组件包含“CardNumberRelation”条带组件

import * as React from "react";
import { ModalSubscriptionForm } from "./ModalSubscriptionForm";
import { exposeComponent } from "../../utils/webpack";
import { Elements, ElementsConsumer } from "@stripe/react-stripe-js";
import { loadStripe, Stripe, StripeElements } from "@stripe/stripe-js";

interface ModalSubscriptionButtonProps {
    buttonText: string;
    stripeApiKey: string;
    stripe?: Stripe | null;
    elements?: StripeElements | null;
}

interface ModalSubscriptionButtonState {
    isModalFormOpen: boolean;
}

export class _ModalSubscriptionButton extends React.Component<ModalSubscriptionButtonProps, ModalSubscriptionButtonState>  {

    constructor(props) {
        super(props);

        this.state = {
            isModalFormOpen: false
        };
    }

    render() {
        return (
            <div>
                <a className="button f5-ns ph4-ns mb3" onClick={() => this.setState({ isModalFormOpen: true })}>{this.props.buttonText}</a>
                {this.state.isModalFormOpen && (
                    <ModalSubscriptionForm
                        isOpen={true}
                        onRequestClose={() => this.setState({ isModalFormOpen: false })}
                        stripe={this.props.stripe}
                        elements={this.props.elements}
                    />
                )}
            </div>
        );
    }
}

const InjectedModalSubscriptionButton = (props: ModalSubscriptionButtonProps) => {
    return (
        <ElementsConsumer>
            {({ stripe, elements }) => (
                <_ModalSubscriptionButton {...props} stripe={stripe} elements={elements} />
            )}
        </ElementsConsumer>
    )
}

const stripePromise = loadStripe("pk_test_1234");

export const ModalSubscriptionButton = (props: ModalSubscriptionButtonProps) => {
    return (
        <Elements stripe={stripePromise}>
            <InjectedModalSubscriptionButton {...props} />
        </Elements>
    )
}

export default ModalSubscriptionButton;

exposeComponent(ModalSubscriptionButton, "ModalSubscriptionButton");

import*as React from“React”；
从“/ModalSubscriptionForm”导入{ModalSubscriptionForm}”；
从“../../utils/webpack”导入{exposeComponent}；
从“@stripe/react stripe js”导入{Elements，ElementsConsumer}；
从“@Stripe/Stripe js”导入{loadStripe，Stripe，StripeElements}；
接口ModalSubscriptionButtonProps{
buttonText：字符串；
stripeApiKey：字符串；
条纹？：条纹|空；
元素？：条带元素|空；
}
接口ModalSubscriptionButtonState{
isModalFormOpen：布尔型；
}
导出类_ModalSubscriptionButton扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
伊斯莫达福尔莫本：错
};
}
render（）{
返回(
this.setState（{isModalFormOpen:true}}>{this.props.buttonText}
{this.state.isModalFormOpen&&(
this.setState（{isModalFormOpen:false}）
stripe={this.props.stripe}
elements={this.props.elements}
/>
)}
);
}
}
常量InjectedModalSubscriptionButton=（道具：ModalSubscriptionButtonProps）=>{
返回(
{（{stripe，elements}）=>(
)}
)
}
常量stripePromise=加载条带（“pk_测试_1234”）；
导出常量ModalSubscriptionButton=（道具：ModalSubscriptionButtonProps）=>{
返回(
)
}
导出默认ModalSubscriptionButton；
exposeComponent（ModalSubscriptionButton，“ModalSubscriptionButton”）；

您是否能够缩小这个问题的来源？需要考虑的几点：

1/您有

props:ModalSubscriptionButtonProps

作为

InjectedModalSubscriptionButton

的参数，但这包括

条带

和

元素

，但随后您使用

元素消费者

中的元素。您确定此处使用的是预期值吗

2/由于

\u ModalSubscriptionButton

实际上不需要条带/元素，因此我建议重构，只将

ModalSubscriptionForm

包装在

元素消费者中（而不是按钮）。这将允许您进一步分离道具。（尽管采用开放/关闭模式可能会带来挑战。）

3/您是否试图在
ModalSubscriptionForm
中使用
uselements（）
？这将与类组件模式冲突，应该重构以使用传递的
元素

通常，我建议您简化组件树，以确定哪一层导致故障。在这里分享这些细节可以让人们帮助你

您能否分叉并修改文档中共享的条带，以使用简化版本的组件重新创建此结果