Reduxのは <p><a href="https://i.stack.imgur.com/tvhP3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tvhP3.png" alt="Component Heirarchy"></a></p> </p><p>Iは、以下の単純化された成分の構造を有するコンポーネント間通信

Question

反応ChildC10は、基本的には各項目のチェックボックスの束とのリストです。ユーザは、このリストから1つまたは複数を選択することができる。

ChildC1は、クリックするとChildC10でチェックインされた項目を選択する必要があります。これをReact、Reduxを使ってどうすればいいですか？

Answer 1

親は、リストから選択された要素を含むローカル状態を持つ必要があります。 ChildC10には、リストの項目のonPressでトリガされる関数である小道具があります。この関数は、setStateを使用して親から項目を追加/削除します。

ChildC1には、状態に関する何かを行う小道具onPressがあります。

親はあなたがselectedItemsのを保存する構造を使用することができ、この

export default class Parent extends Component { 

    state = { 
    selectedItems: [], 
    } 

    render() { 
    return (
     <div> 
     <ChildC10 
      selectedItems={this.state.selectedItems} 
      onItemPressed={(item) => { 
       const currentList = this.state.selectedItems; 
       //Find if item already in it 
       //Modify (add or remove) the element from currentList 
       this.setState({selectedItems: currentList}) 
      }} 
     /> 
     <ChildC1 onButtonPress={() => /*do the thing you want to do with the selectedItems. You have access to it in the state*/}/> 
     </div> 
    ); 
    } 
} 

ようなものになるだろう。 API呼び出しを行うためにアクションを呼び出す場合は、Parentでアクションを呼び出します。私はReduxにChildC1をバインドしません。なぜなら、それは視覚的なものだけを行うダムコンポーネントなのですから。コンテナ（あなたのケースでは親）は、論理を持つ必要があるものです。

それはそうではなかった場合は、最後の段落を忘れ

、ちょうどコードをチェック：P

はそれが役に立てば幸い！