React JSディープコールバックを回避する方法

Question

私の質問は、「子コンポーネントのデータにアクセス/反応したいときにコールバックを深く送信しないようにする方法はありますか」です。

私は順番に順番に子コンポーネントTraitが含まれている子コンポーネントTraitCollectionが含まれている子コンポーネントPersonを含むコンポーネントApplicationを持っています。

はTraitが変更されたとき、私はPersonListという名前Applicationに別の子に転送するApplicationに戻ってデータを送信します。

私の現在の解決方法は、各子供に小道具としてコールバックを送信することです。各コールバック関数は、最後にApplicationに達するデータを構成して追加します。PersonListの小道具としてそれを渡します。

「レベルを増やす」、またはコンポーネントをより小さな部分に分割すると、このコールバックチェーンはさらに複雑になると思います。

これを行う方法は他にありますか、これはReactの子供から親にデータを渡すのを処理する最良の方法ですか？

Answer 1

扱い方はですが、の方が一番リアクション的です。あなたが見つけた問題以外に、そのアプローチ自体には何も問題はありません。 Reduxはその問題の解決に役立つと思われます。 Reduxを使用すると、Reactアプリケーションの状態を、共通のストアの使用と、アクションクリエイター、アクション、およびレデューサーに基づく優れたデザインパターンで統一することができます。

Answer 2

React Contextは直接https://facebook.github.io/react/docs/context.htmlでも使用できますが、React-Reduxを使用すると、コールバックを避けることができ、ストアに接続されているコンポーネントからコンポーネントの状態を変更できるようになります。ディスパッチ機能付き。