Question

当我<Link> CheckoutForm到Stripe的<CheckoutForm />组件时，什么也不显示。我在这里https://stripe.com/docs/recipes/elements-react#setup遵循带有React的Stripe指令，但其中不包括与React Router集成的步骤。

如果我将组件用作<Link to='/checkoutForm' />而不与路由器一起用作<stripeProvider>，则此功能正常。

我尝试用<Elements>和<CheckoutForm />将Router封装在app.js中，但它不仅不显示任何内容，而且弄乱了其他路由。

我还尝试渲染容器组件来代替<Link>，以避免<StripeProvider apiKey="pk_test_lKyP93clx4TYCo2CTdLxtMY3"> <Elements> <Link to='/checkoutForm' className='panel flex center' style={{ textDecoration: 'none' }}><button className='bold grey'>Purchase Followers</button></Link> </Elements> </StripeProvider>但同样的问题。

<CheckoutForm />

下面的代码有效，但是我不想呈现<StripeProvider apiKey="pk_test_lKyP93clx4TYCo2CTdLxtMY3"> <Elements> <CheckoutForm /> </Elements> </StripeProvider>我要链接到它的

<StripeProvider apiKey="pk_test_lKyP93clx4TYCo2CTdLxtMY3">
            <Router>
                <Fragment>
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Elements >
                            <Route path="/checkoutForm" component={CheckoutForm} />
                        </Elements>
                        <Route path="/:id/edit" component={Edit} />
                        <Route path="/:id/delete" component={Delete} />
                        <Route path="/:id" component={ChirpContainer} />
                    </Switch>
                </Fragment>
            </Router>
        </StripeProvider>

我在下面尝试过

<StripeProvider>

编辑：在研究Stripe指令和本示例https://codesandbox.io/s/l72l6k779q时，以下几点很清楚：

Stripe元素有一个容器组件
无论容器组件在哪里呈现，它都被<Elements>和injectStripe包裹
容器组件与data-whatever="Add a recipe"一起导出

现在，我的问题是我不以通常的方式渲染容器组件；我想通过路由器在链接中呈现它。 那么，如果该组件位于Router Link中，那么该容器组件将用StripeProvider和Elements包装在哪里以及如何包装？

Answer 1

我认为这里的问题是您向后嵌套。我认为<PropertyGroup> <TargetFramework>netcoreapp2.2</... ... <MvcRazorCompileOnPublish>true</MvcRazorCompileOnPublish> <PreserveCompilationContext>true</PreserveCompilationContext> </PropertyGroup> <ItemGroup> ... <PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.ViewCompilation" Version="2.2.0" /> </ItemGroup>及其元素应在您的StripeProvider组件内。像这样：

CheckoutForm

然后在<Router> <Link to='/checkout-form'>Check out</Link> <hr /> <Route path='checkout-form' component={CheckoutForm} /> </Router>中，您的渲染函数中将具有以下内容：

CheckoutForm

就孩子而言，应为<StripeProvider apiKey='pk_test_lKyP93clx4TYCo2CTdLxtMY3'> <Elements> // ...your Stripe elements and other form elements </Elements> </StripeProvider>> Router>您的表格。

条带CheckoutForm组件使用<link />

1 个答案: