Stripe-React：使用 Elements Provider 包装根应用程序答案

【问题标题】：Stripe-React: wrapping root application with Elements ProviderStripe-React：使用 Elements Provider 包装根应用程序
【发布时间】：2021-02-28 01:54:30
【问题描述】：

我正在构建一个反应前端和一个节点后端，使用条带进行支付。 documentation 提到：要使用 Element 组件，请将 React 应用的根目录包装在 Elements 提供程序中。

它将应用程序显示为包装在元素的提供程序中。这是否意味着 React 项目的结构应该始终是 App.js 组件包装在 Elements 提供程序中的结构？

或者该元素提供程序可以包裹在任何将显示元素的组件周围吗？

示例如下：

文档中有这个示例，其中结帐表单位于 App 组件中：

...
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 中？

【问题讨论】：

标签： node.js reactjs stripe-payments

【解决方案1】：

那么是否建议将元素放在配置文件中组件而不是被包裹在 App.js 中？

是的，在 Elements Provider 中只包装需要 Stripe.js 的组件（通过 useElements 和 useStripe 钩子）是非常好的。换句话说，任何使用 useElements 或 useStripe 的组件都需要通过 Elements Provider 包装自身，或者在 Elements Provider 包装的组件树上的某处有一个祖先。

在您的示例中，如果 Profile 组件是唯一使用 Stripe 的组件，我会亲自使用 Elements 包装它。 Stripe Elements 提供者在后台使用 Context API，您可以在此处阅读更多信息：

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

【讨论】：