React组件中的两个提供程序

Question

我想在我的React应用程序中实现条带元素,看起来我可以使用一个很好的包装器.

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

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

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

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

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

Answer 1

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

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

提供程序是一个高阶组件,它应该只是挂钩到React并提供其他功能(通常在上下文中),而无需更改任何内容或删除现有功能.

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

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

如果您多次嵌套相同的提供程序,可能会遇到问题,因为它们可能会相互干扰,但通常情况下,提供程序模式是使用应用程序中可用功能修饰react应用程序的常用方法,而无需将该功能传递给每个组件单独.