ReactJS + React Router：特定のオブジェクトをプロパティとして渡す方法を参照するには？

Question

私は現在テーブルを持っており、各セルにボタンがあります。その特定の日（月曜日または火曜日）、クラス（クラス1またはクラス2）、および名前（KevまたはJosh）に基づいてボタンをクリックすると、テーブル内のその特定のボタンに関連するオブジェクトを新しいページ？ ReactJS + React Routerを使用して、これに正しいアプローチは何でしょうか？

新しいページに一度移動すると、新しいページは、渡されたオブジェクトからのクラス情報を持つ表を、ボタンのクリックに関連して挿入します。

コード：

http://jsfiddle.net/k7wbzc4j/16/

は、表の行データがそうように構成し、次のようなIDに基づいてオブジェクトを参照しなければならず、又はより良好な構造ものになり - その特定の位置を特定したいと思いidオブジェクトは、セルの場所に基づいています（曜日、名前、およびクラス番号が考慮されます）。例えば

list: [ 
    { 
    name: Kev 
     monday: { 
     class1: { 
      id: 0, 
      classTitle: abc, 
      number: class1, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     }, 
     class 2: { 
      id: 1, 
      classTitle: def, 
      number: class2, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     } 
     }, 
     tuesday: { 
     class1: { 
      id: 2, 
      classTitle: ghi, 
      number: class1, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     }, 
     class 2: { 
      id: 3, 
      classTitle: jkl, 
      number: class2, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     } 
     }, 
    }, 

    { 
    name: Josh, 
     monday: { 
     class1: { 
      id: 4, 
      classTitle: mno, 
      number: class1, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     }, 
     class2: { 
      id: 5, 
      classTitle: pqr, 
      number: class2, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     } 
     }, 
     tuesday: { 
     class1: { 
      id: 6, 
      classTitle: stu, 
      number: class1, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     }, 
     class2: { 
      id: 7, 
      classTitle: vwx, 
      number: class2, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     } 
     }, 
    } 
    } 
] 

、月曜日のコラム、class1でケヴの行は、次のページに次の小道具を渡したい場合：

class1: { 
    id: 0, 
    classTitle: abc, 
    number: class1, 
    info: { 
    time: 1, 
    classSize: 2, 
    } 
} 

が受け入れるとupvoteお答えします。事前にありがとう

Answer 1

reduxのような集中管理ツールが便利な場所です。選択したクラスをストアに設定するアクション（何かをSELECT_CLASSのようなもの）をディスパッチし、新しいコンポーネントからその値を読み取ることができます。私はこのアプローチをお勧めします。

ただし、別の方法があります。各ブラウザ履歴エントリの概念はstateです。したがって、新しいルートに移動すると、選択したデータをその履歴エントリの状態で保存してから、コンポーネントのレンダリング時にそのデータを読み取ることができます。それを読むには

router.push({ 
    to: '/path', 
    state: class1 
}); 

：https://github.com/ReactTraining/react-router/blob/master/docs/API.md#pushpathorloc

UPDATE：Reduxのためイェーイ

router.location.state 

はルータのドキュメントを反応させるの

保存状態：それはこのようになります！だから、最初に、このためのアクション+アクションの作成者を定義することができます：あなたがきたと仮定すると、

今

import { SELECT_CLASS } from '/path/to/action' 

const selectedClass = (
    state={}, 
    action 
) => { 
    switch (action.type) { 
    case SELECT_CLASS: 
     return action.class; 
    default: 
     returns state; 
    } 
}; 

：

今

export const SELECT_CLASS = 'SELECT_CLASS'; 
export const selectClass = (class) => { 
    return { 
    type: SELECT_CLASS, 
    class, 
    } 
}; 

、これを処理する減速機がどのように見えるかを見てみましょう

：

// First argument is mapStateToProps, the second is mapDispatchToProps 
// https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options 
export default connect((state) => state, { selectClass })(YourComponent); 

これは、あなたが選択したクラスを設定します方法です。このような反応-Reduxのを経由してあなたのコンポーネントを接続

そして、あなたの次のコンポーネント（も接続する必要がありますが、mapDispatchToPropsを必要としないで：

render() { 
    const { selectedClass } = this.props; 
    // do what you need with the class. 
} 

あなたが設定する任意の助けが必要な場合は、Reduxの+反応し、ドキュメントhereは素晴らしいです。私が使用しているES6の構文がよくわからない場合は、参考資料があります。here

更新2：私はあなたのフィドルをとり、それを使って実行しました：http://jsfiddle.net/k7wbzc4j/17/。各ボタンには、正しいオブジェクトを取得するクリックイベントがあります。

FINAL UPDATE：だからここ​​

handleClick(e) { 
    const classTitle = e.target.innerHTML; 
    let obj = undefined; 
    data.forEach((schedule) => { 
     ['monday', 'tuesday'].forEach((day) => { 
     const classes = schedule[day]; 
     return Object.keys(classes).forEach((c) => { 
      const cls = classes[c]; 
      if (cls.classTitle === classTitle) { 
      obj = cls; 
      } 
     }); 
     }) 
    }); 

    if (obj) { 
     // do your navigation here 
    } 
    } 

まずの荒廃だ、我々はスケジュールのすべてを保持する配列dataを反復するためforEachを使用しています。次に、毎日（現在はmondayとtuesdayのみ）繰り返し、現在のスケジュールでその日のすべてのクラスを取得します。そして、すべてのクラスの名前がわからないので、すべてのキー（クラス名）を取得してそれらを反復するだけです。最後に、実際のクラスオブジェクトを取得し、classTitleがクリックされたものと一致するかどうかを確認できます。その場合は、そのオブジェクトをobjに保存します。最後に、一致するオブジェクトが見つかったことを確認してから、そのクリックを適切に処理するために必要な処理を行います。それはかなり面倒ですが、あなたのデータ構造を考えると必要です。私はあなたの懸念に対処するために（すべてのそれらを一緒にリンクするIDを持つ別々の配列で、Users。例えばClasses、Days、およびSchedulesオブジェクト）

をもう少しリレーショナルこのデータを保存しようとすると、個別項目の各タイプを格納お勧めしますclassTitleが同じになると、誰がクリックされたのか（またクリックされた日）を把握しなければなりません。あなたはこれをいくつかの方法で行うことができます：各ボタンにdata-user属性を追加してクリックすると、「選択されたユーザー」という概念が実装され、そのテーブルの行をレンダリングして新しいコンポーネント（UserSchedule） 、小道具として、そのユーザーのクラス。そうすれば、一致するクラスがそのユーザーに属していることがわかります。私が言ったように：いくつかの方法。

これを新しいコンポーネントに渡す方法を示していますが、私は上のように2つの方法を実証しています：履歴状態を介して、またはredux reducerに値を格納し、それを小道具として受け取ります。それ以上のことは、私にはあなたのための問題全体を解決することに等しいと思います。私はこれが唯一のやり方なので、あなたがそれを自分でやることです。自分自身を信頼し、私が与えた助言に従い、の特定ののバグにインターネットを使用すると、上に出てきます！