Node.js Stripe React：使用元素提供程序包装根应用程序

我正在构建一个react前端和一个使用stripe进行支付的节点后端。其中提到：要使用元素组件，请将React应用程序的根包装在元素提供程序中

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

或者可以将元素提供者包装在任何将在其上显示元素的组件上吗

示例如下：

文档中有一个示例，其中应用程序组件中有一个checkoutform：

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

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

。。。
const stripePromise=loadStripe（“pk_test_51hhhkVnbmzzhlkiurzn5UWSHQBK9Y1CalJPR3L23AT7BauIx1JZCDKLVx26FRTFKfe8QTAUZCTCUTBHRXCQTI00GRKBYPZH”，
{apiVersion:“2020-08-27”}）；
函数App（）{
返回(
);
};

但是，如果我使用我的

App.js

纯粹用于路由，而

CheckoutForm

在另一个页面中呈现，比如

Profile

，会怎么样呢。那么，是否建议将

元素

放在配置文件组件中，而不是放在App.js中

那么，是否建议将元素放入配置文件中 组件，而不是包装在App.js中

是的，在元素提供程序中只包装需要Stripe.js（通过和钩子）的组件是非常好的。换句话说，任何使用

uselements

或

useStripe

的组件都需要通过元素提供程序包装自己，或者在元素提供程序包装的组件树上的某个位置有一个祖先

在您的示例中，我个人会使用元素包装

Profile

组件，如果这是唯一使用条带的组件。在后台，Stripe元素提供程序使用上下文API，您可以在此处阅读更多内容：