Question

我希望在我的React应用程序中实现条带元素，看起来我可以使用一个不错的包装器。

但是，在文章中，作者说我们必须使用id=122并在根应用程序组件级别实现它 - 请参阅https://github.com/stripe/react-stripe-elements#getting-started

我需要使用自己的提供商连接到我的商店。如何在组件中使用两个提供程序？我甚至不确定这是不是一个好主意。

我当前的渲染方法如下所示：

StripeProvider

我会将一个提供商包裹在另一个提供商周围吗？

Answer 1

是的，您应该可以根据需要包装任意数量的提供程序：

render(
  <ProviderA whatever={3}>
    <ProviderB store={store}>
      <App>
        <SomeComponentInMyApp />
      </App>
    </ProviderB>
  <ProviderA>,
  document.getElementById('content-wrapper')
);

提供者是Higher-Order Component，它应该只是挂钩到React并提供其他功能（通常在context上），而不会改变任何内容或删除现有功能。

这也意味着提供商的顺序并不重要，除非由于某些原因提供商依赖于彼此的存在。

另一个例子可能是样式组件的ThemeProvider。

如果您多次嵌套相同的提供程序，可能会遇到问题，因为它们可能会相互干扰，但通常情况下，提供程序模式是一种常见的方法，可以在应用程序中使用可用的功能来装饰react应用程序，而无需通过每个组件的功能。

React组件中的两个提供程序

1 个答案: