React 组件中的两个提供程序

Question

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

然而，在文章中，作者说我们必须使用StripeProvider，他在根App组件级别实现了它——见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')
);

提供者是一个Higher-Order Component，它应该只是挂钩到 React 并提供额外的功能（通常在 context 上），而不需要更改任何内容或删除现有功能。

这也意味着提供者的顺序并不重要，除非出于某种原因提供者相互依赖。

另一个例子可能是 styled-components 中的 ThemeProvider。

如果您多次嵌套同一个提供程序，您可能会遇到问题，因为它们可能会相互干扰，但一般来说，提供程序模式是一种常用方法，可以用整个应用程序可用的功能来装饰 react 应用程序，而无需传递该功能分别应用于每个组件。