web-dev-qa-db-ja.com

Reactコンポーネントの2つのプロバイダー

Reactアプリにストライプ要素を実装しようとしていますが、使用できる素敵なラッパーがあるようです。

ただし、この記事では、作成者はStripeProviderを使用する必要があり、ルートアプリコンポーネントレベルで実装していると述べています。 https://github.com/stripe/react-stripe-を参照） elements＃getting-started

ストアに接続するには、自分のプロバイダーを使用する必要があります。コンポーネントで2つのプロバイダーを使用するにはどうすればよいですか？これが良い考えかどうかさえわかりません。

私の現在のレンダリングメソッドは次のようになります。

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

あるプロバイダーを他のプロバイダーにラップしますか？

javascriptreactjsreduxreact-reduxreact-stripe-elements
7
Sam

うん、あなたはあなたが望むだけ多くのプロバイダーをラップすることができるはずです：

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

プロバイダーは 高階コンポーネント であり、Reactにフックして、何も変更せずに（通常は コンテキスト ）追加機能を提供する必要があります）または既存の機能を削除します。

これは、何らかの理由でプロバイダーが互いの存在に依存しない限り、プロバイダーの順序は実際には重要ではないことも意味します。

別の例としては、styled-componentsの ThemeProvider があります。

同じプロバイダーを複数回ネストすると、互いに干渉する可能性があるため、問題が発生する可能性がありますが、一般に、プロバイダーパターンは、アプリ全体で利用可能な機能で反応アプリを装飾するための一般的なアプローチです。各コンポーネントを個別に。

8
nem035