3

次のビデオの「コンテナとコンポーネント」アプローチに従って、Flux アーキテクチャで再利用可能なコンポーネントを構築しています。

React.js Conf 2015 (22分50秒): https://youtu.be/KYzlpRvWZ6c?t=22m50s

たとえば、「次へ」ボタンのある画像スライダーを作成しています。

ImageSliderContainer

  • ImageSliderStoreをリッスンし、状態を維持します (例: currentIndex)
  • 小道具を使用してImageSliderをレンダリングします

画像スライダー

  • props に基づいてレンダリングするだけのステートレス コンポーネント
  • 子コンポーネントNextButtonがあります

次へボタン

  • props に基づいてレンダリングするだけのステートレス コンポーネント
  • onClick イベントあり

Flux アーキテクチャでは、NextButtonをクリックするとアクションがストアに送信されます。次に、ストアは「currentIndex」を更新し、change イベントを発行します。ImageSliderは、単一のコンテナーが通知される単一のストアと密接に結合されているため、再利用できなくなったようです。

別のオプションは、状態「currentIndex」をImageSliderコンポーネントに追加することです。NextButtonをクリックすると、 ImageSliderにその状態を更新するよう通知します。しかし、これはNextButtonからImageSliderへの逆のデータ フローを導入します(Flux アーキテクチャに違反しますか?)。また、コンポーネントが props を使用して UI をレンダリングするだけの「コンテナとコンポーネント」のアプローチにも反しています。

Flux アーキテクチャで再利用可能なコンポーネントを作成する最良の方法は何ですか? より具体的には、 NextButtonコンポーネント内で発生する onClick イベントを処理する必要がある要素 (ストア、コンテナー、コンポーネントなど) はどれですか?

編集済み

回答に基づいて、Flux アーキテクチャと「コンテナーとコンポーネント」パターンの両方を満たす 1 つのソリューションを次に示します。

  • コンテナは状態「currentIndex」を所有しています。アプリには、 ScreenshotSliderContainerやDebugSliderContainerなどの複数のコンテナーが含まれる場合があり、それぞれが独自の "currentIndex" を保持します。
  • コンテナーは onClick ハンドラーをプロパティとしてコンポーネントImageSliderに渡します。onClick ハンドラーはアクションをストアに送信します。
  • ImageSliderコンポーネントはステートレスであり、 onClick ハンドラーを子コンポーネントNextButtonに転送します。
  • したがって、 NextButtonの onClick イベントは最上位コンポーネントのImageSliderには影響しません。コンテナーのみが新しい props を使用してImageSliderをレンダリングします。
4

1 に答える 1

6

反応チュートリアルのように、 onClick イベントハンドラーをプロップとして渡すことができます: http://facebook.github.io/react/docs/tutorial.html#callbacks-as-props

于 2015-03-26T10:27:31.573 に答える