引き続きReduxの勉強です。
前回はreducerを書いたので、Reduxに必要な部品は全てそろいました。
今回は、コンテナコンポーネントでpropsに変換したstateや関数を、プレゼンテーションコンポーネントに組み込んでいきます。
Pageをデフォルトで非表示
まず、Pageのスタイルにdisplay: none;を追記します。
これで、スライドの全てのページが１時的に非表示となります。
propsをSlideからPageに受け渡す
Swipeコンテナコンポーネントで、propsを定義してSlideプレゼンテーションコンポーネントに渡しています。
なのでSlideからPageへと、さらにpropsを渡します。
また、その際にpropsに対して型や有無のチェックを行います。
Slideコンポーネントがこちら。
Pageコンポーネントに現在のページ情報（currentPage）を渡しています。
また、divを２つ追加して、各々にprevPage, nextPage関数をonClickに割り当てています。これがスライド送りのボタンとなります。
Pageで受け取ったpropsを利用する
次に子コンポーネントであるPage側に追記をします。
このようになりました。
ここでポイントは、styleとして、currentPage=indexだったときにdispaly: block; を指定しています。
つまり、現在ページ＝そのページの番号ならばページを表示します。そしてそれ以外のページを非表示化します。
以上で、propsのプレゼンテーションコンポーネントへの組み込みは完了です。
次回は、onClickで指定したページ送り関数についてです。
