コンポーネント階層と一致しないレイアウトコンテナを処理する方法は？

Question

私が理解している限り、Reactでは、コンポーネントはネストされた階層を介して階層的な順序で通信する必要があります。このことから、アプリケーションのレイアウトコンテナ構造が自然/予期/論理コンポーネント階層と一致しない場合の対処方法

私の質問の例として、私は私が適切に実装するかどうかはわかりませんことを、私のアプリに基づいてシナリオを作ってみた：

画面を二等分に縦に分割されています。これは2つのコンテナを横に並べて行われます。各半分に対応する コンポーネントがあります。ItemsListおよびItemDetails。 ItemsList内にネストされ

、我々は上をクリック することができますいくつかの項目コンポーネントがあります。

たびに、対応する定義_itemIDプロップ値はそれがそこに項目詳細をロードして表示することができItemDetailsに送信する必要アイテム、上でクリックがあります。

問題はできるItemDetailsが項目の子で、まだあることを意図しています、画面の右側部分にもどのコンポーネント構造、与えられた、あります。 （少なくとも私が避けたい奇妙なCSSはありません）。ここで

レイアウトです：

<div className="wrapper"> 
    <div className="itemList" style="width:50%; display:inline-block;"> 
     <div className="item">item1</div> 
     <div className="item">item1</div> 
     <div className="item">item1</div> 
    </div> 

    <div className="itemDetails" style="width:50%; display:inline-block;"> 
     The details of the selected item. 
    </div> 

</div> 

私は階層をアップし、次の子から親に情報を送ることができると考えているが、これは実用的でないようです。このシナリオが私の実際の問題を単純化しただけであることを考えれば（私はより多くの入れ子にされたコンポーネントを持っています）、これはコードが乱雑で混乱してしまうと思います。

Reactでこれを達成するクリーンで簡単な方法はありますか？私はいくつかの概念を欠いていますか？

Answer 1

私の場合は、ラッパーに基づいたコンテナコンポーネントがあります。これは、すべての状態の変更を処理し、現在選択されているアイテムの真実のソースになります。次に、ラッパーコンポーネントから呼び出されたコールバックを、アクティブなアイテムの状態の設定を処理するItemsListに渡す必要があります。

次に、activeItemを小道具としてitemDetailsコンポーネントに渡すことができます。

：状態を管理し、

階層構造は次のようになり、それらはコンテナの状態を変更するアクションを作成できるようになる子コンポーネントにダウンコールバック関数を渡すコンテナコンポーネントを持っているために、かなり一般的なパターンですここで

<Wrapper> // holds the state of active item and provides functions to change the active item 
<ItemList /> // provides a list of items that when clicked sets active 
<ItemDetail /> // shows the detail of the currently select item 
</Wrapper> 

は、私は、これは常に多くのものに依存し

http://codepen.io/finalfreq/pen/KgEzgE

Answer 2

を説明しようとしているもののペンです。 小規模なプロジェクトを計画しているなら、setstateを使って作業して、finalfreqの偉大な答えを参照してください。あなたがうまくスケールする（痛みを伴わずに成長する）なら、私は状態管理ライブラリを選ぶでしょう。

「ライブラリを使う！」と簡単な質問に答える人は嫌いですが、私が言ったように、あなたが持っていなければfinalFreqの答えよりもはるかに良くなりませんあなたのアプリを成長させる必要があります。あなたが本当に必要があるまでは、還元主義者は、あなたが最初に還元しなくても反応することを学ぶべきであると述べています。

reduxを使用する場合は、スコープを渡すためにコンポーネントの構造を心配する必要はありません。私が間違っていない（私はXDである）コンポーネントの構造は、理解して維持するのが最も簡単なものに基づいていなければなりません。

あなたの質問は反応の文脈にありますが、これは本当に状態管理とデータ通信の問題だと思います。私は最近、redux.js（パブ/サブライブラリのような）を選択しますが、多くの選択肢があります。 Reduxはもう少しタイピングが必要ですが、プロジェクトが成長するにつれて感謝する極端な説明をしています。

But the main reason I would reach for this is that it focuses on functional programming principlesあなたの状態の変異をあなたのアプリの外縁にプッシュします。これにより、コードが簡単になります。バグが存在する場合はそれを見つけるのは簡単だ

http://redux.js.org/

（すべての突然変異はあなたにもさらに多くのコードを簡素化するutilのファイルにあなたの計算を移動します。減速ファイルにする必要があります）