Stripe-React: обертывание корневого приложения с помощью Elements Provider

Я работаю над созданием интерфейса реагирования с серверной частью узла, используя полосу для платежей. В документации упоминается следующее: Использование компонентов Element , оберните корень вашего приложения React поставщиком Elements.

Он отображает приложение как обернутое поставщиком элемента. Означает ли это, что структура проекта реагирования всегда должна быть такой, в которой компонент App.js заключен в поставщика Elements?

Или этот провайдер Elements может быть обернут вокруг любого компонента, на котором будут отображаться элементы?

Пример ниже:

В документации есть этот пример, где форма оформления заказа находится в компоненте приложения:

...
const stripePromise = loadStripe("pk_test_51HhkvNBmZZhLkiuRzN5UwsSHQQbK9y1CALJpr3l23aT7bauIx1JzCdkKlVx26FrtFkFE8QtAUZctcuUtBhRxcqti00grkBypzH",
  {apiVersion: "2020-08-27"});

function App() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
};

Но что, если я использую свой App.js исключительно для маршрутизации, а CheckoutForm отображается на другой странице, такой как Profile. Рекомендуется ли тогда, чтобы Elements помещался в компонент Profile, а не в App.js?


reactjs node.js stripe-payments react-stripe-elements
person LoF10    schedule 16.11.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В таком случае рекомендуется, чтобы элементы находились в компоненте «Профиль», а не в App.js?

Да, можно обернуть только те компоненты, для которых требуется Stripe.js (через useElements и перехватчики useStripe) в поставщике элементов. Другими словами, любой компонент, который использует useElements или useStripe, должен либо сам быть обернут поставщиком элементов, либо иметь предка где-то вверх по дереву компонентов, который обернут поставщиком элементов.

В вашем примере я бы лично обернул компонент Profile элементами, если это единственный компонент, использующий Stripe. Под капотом поставщик Stripe Elements использует Context API, о котором вы можете узнать больше здесь:

https://reactjs.org/docs/context.html

person ttmarek    schedule 16.11.2020