Компонент Stripe CheckoutForm ничего не отображает на React Router с использованием <Link> - PullRequest
Новая
       9

Компонент Stripe CheckoutForm ничего не отображает на React Router с использованием <Link>

0 голосов
/ 25 января 2019

Когда я <Link> к компоненту CheckoutForm Stripe, ничего не отображается. Я следую инструкциям Stripe with React здесь https://stripe.com/docs/recipes/elements-react#setup, но он не содержит шагов по интеграции с React Router.

Это функционально, если я использую компонент как <CheckoutForm />, но не как <Link to='/checkoutForm' /> с маршрутизатором.

Я попытался обернуть маршрутизатор в app.js с <stripeProvider> и <Elements>, но тогда он не только ничего не отображает, но и портит другие маршруты.

Я также пытался визуализировать компонент контейнера вместо <CheckoutForm />, чтобы избежать <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>

Редактировать: При изучении инструкций Stripe и этого примера https://codesandbox.io/s/l72l6k779q, ясно следующее:

  • есть компонент контейнера для элементов Stripe
  • везде, где отображается компонент контейнера, он оборачивается <StripeProvider> и <Elements>
  • компонент контейнера экспортируется с injectStripe

Теперь моя проблема в том, что я не визуализирую компонент контейнера обычным способом; Я хочу сделать это через Link через маршрутизатор. Так где и как мне обернуть компонент контейнера с помощью StripeProvider и Elements, если он находится в соединении маршрутизатора?

1 Ответ

0 голосов
/ 25 января 2019

Я думаю, что проблема в том, что у вас есть свое вложение назад. Я думаю, что 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> StripeProvider> ваша форма.

...