react

React使ってSPAを作るよ(16)


React使ってSPAを作るよ目次

React使ってSPAを作るよ(15)の続きです。

タグでの絞り込みも、コンポーネントの再利用で可能に

もう気づいた方もいるかもしれません。
前回コンポーネントを共通化して、別のデータを表示することができました。
ということは…
特定のタグで絞り込んだデータがあれば、それも同じ記事リストのパーツを使ってレンダリングできるということです。

そこで、「/api/article?tag=1」のようにtagのidを指定するとそのタグが設定されている記事のみのリストを返すようなURLを用意しておきます。
JSONの静的ファイルで持っていてもいいですが、私は同僚に作ってもらったAPIを叩いてます。

React使ってSPAを作るよ(13)で、記事リストに変更があったら自動で再レンダリングするという機能をつけました。
このとき$.ajaxは

となっていました。
ということは、このurlに指定している値を変えてやれば、そこで返ってきたデータでレンダリングできるということです。

まずはこのURLを変数に格納しておきましょう。
すべてのJSXファイルで使えるように、bundle.jsの先頭に来るように書いておくといいです。
私の場合はとりあえず、bundle.jsより前に読み込むcommon.jsに書いておきました。

記事リストのコンポーネント全文はこちら。
urlのところだけ、変数のapiURLに変えました。

次に、タグをクリックしたときにこの変数にURLを代入する処理を作らないといけないですね。

前回作ったTag.jsxを修正しましょう。

タグのli要素に、onClick={this.handleAjax}を追加しておきます。
このhandleAjax()関数の中でapiURLを設定するのですが、どのタグをクリックしたのか、タグのidを渡さないといけません。

フォームのときにもやったように、ref属性をつけることで要素を特定します。
そして、name属性にタグのidを入れておいて、this.refs.tag.nameでURLにくっつけています。

本当はdata-tagとかのカスタム属性にしておきたかったんですが、.dataTagとか、.data(‘tag’)とかしても渡せなくて、もちろん.data-tagもダメで、悩んだ末name属性を使いました…
誰かやり方教えてください(;´Д`)

こんな感じに動きます!

・・・

これ、履歴がないんですよね。
理想としては、HTML5のHistoryAPIを使って各タグのURLを持たせたりしたいですね。react-routerを使う方法などいろいろ調べてはいるのですが…
まだよく理解できません(;´Д`)

React使ってSPAを作るよ目次

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です