React - コンポーネント間のコミュニケーション（初心者向け）

Question

React JSの中では本当に新しいです。数週間前、私はJS、jQueryのTo Do Listアプリケーションを作成しましたが、今はReactを使って再構築するつもりです。私の見解を変えてReactを練習します。

I持っているいくつかのコンポーネント異なるファイルで（兄弟）と1つの親コンポーネント - アプリケーション、コンポーネント：

アプリケーション： - ナビゲーション - タスクリスト - タスク 追加 - フッターを

どのようにすることができます私のナビゲーションコンポーネントはタスクリストコンポーネントと通信しますか？ より具体的には、というグローバル変数 selectedDayのようなものを持っていて、すべてのコンポーネントで使用したいと思っています。 日曜日などのナビゲーションコンポーネントでユーザーが1日選択すると、この変数に "sunday"を保存し、後でそれをタスクリストで使用したいとします（これはもちろんサンプルデータの例です）。私の質問は最初のコンポーネントにデータを格納し、別のコンポーネントで使用する方法？

このような目的で状態を使用する必要がありますか？私はparent（App）コンポーネント - > selectedDay： "monday"/default /に初期状態を設定し、後でNavigationコンポーネントでそれを更新し、Task Listコンポーネントで使用することを考えていました。私を手伝ってくれますか？私は感謝しています！

Answer 1

これには2つの解決策があります。

1- Reduxのようなグローバルな状態を扱うライブラリを使用してください（FurkanOはこう言っています）。こうして、あなたの "大きなコンポーネント"（別名コンテナ）は、アプリケーションのグローバルな状態に接続され、アクションで更新されます。 アクションは、減速機によって傍受されて状態の更新をトリガーするタイプ、場合によってはペイロードを持つ何らかの種類のイベントです。

2-インターフェアリングしたいコンポーネントの最も低い共通の親の状態を使用します。

2-：親コンポーネントの基本例には、ナビゲーション& TaskListが含まれています。

class Parent extends Component { 
    state = { 
    selectedDay: defaultDay, 
    } 

    setDay = (selectedDay) => { 
    this.setState({ selectedDay }); 
    } 

    render() { 
    const { selectedDay } = this.state; 
    return (
     <div> 
     <Navigation setDay={this.setDay} /> 
     <TaskList selectedDay={selectedDay} /> 
     </div> 
    ); 
    } 
} 

ナビゲーションコンポーネントでこのsetDay関数を使用して、親コンポーネントの状態を設定するだけです。そうすれば、TaskListはその小道具を介して新しい値を受け取ります。 この方法には限界があります（私の意見では実際にはうまく調整できません）。

希望しました。これが明確でないかどうか教えてください。

Answer 2

あなたが必要なのは還元です。これは、オブジェクトであるグローバルな状態ツリー、それを操作する方法、そして最も重要な点として、状態ツリーの変更によってコンポーネントが再レンダリングされるたびに提供されます。更新された状態ツリーを使用してコンポーネントが常に最新の状態になるようにします。