Javascript React组件中的两个提供程序

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

然而，在本文中，作者说我们必须使用

StripeProvider

，并在根应用程序组件级别实现它——请参阅

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

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

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

渲染(
,
document.getElementById（'content-wrapper'）
);

---

我是否可以将一个提供商包装到另一个提供商上？

是的，您应该能够包装任意多个提供商：

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

渲染(
这应该只是挂接到React并提供额外的功能（通常在上），而不改变任何内容或删除现有功能

这也意味着提供者的顺序并不重要，除非出于某种原因提供者依赖于彼此的存在

另一个例子是来自样式化组件的

如果多次嵌套同一个提供程序，您可能会遇到问题，因为它们可能会相互干扰，但通常情况下，提供程序模式是一种常用的方法，可以使用应用程序中可用的功能装饰react应用程序，而无需将该功能单独传递给每个组件。
感谢您的支持详细的回答。我遇到了这个问题，有点担心，但在他的回答中，丹·阿布拉莫夫似乎在谈论多个“商店”。供应商不一定是商店。讨论如下：是的，所以这就是我在回答中所说的“多次嵌套同一供应商”的意思，在你的情况下，你不应该担心这个。很高兴能帮助你。