react

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


React使ってSPAを作るよ目次

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

まずは残りのコンポーネントを書いてしまいます!

ド━(゚Д゚)━ン!!

って具合で、これをブラウザで確認すると、

react

それぞれのパーツが1個ずつ描画できました。

Reactで繰り返しを記述するには?

さてこのパーツ。
大枠の記事もリストにしたいし、タグやコメントも、データを取得して連続で描画したいですね。
繰り返しはfor文とか使うのかな?と思いきや、map関数を使うらしいです。
参考にさせていただいたのがこの記事。

JSONで外に出したデータを読み込んで、データの数だけ要素を生成します。

JSXのソースを見慣れていないのと、dataやcommentというのがいっぱいあって何がなんやらなので、ひとまずこっちのモックでもコメントリストの部分だけ使って実現してみたいと思います。

まずはJSONデータを用意します。
JSXの最初の方に置いておきましょう。

コメントのコンポーネントを記述します。

ここまでは前回やったのと同じ感じですね。
ここからが今回のポイントになる繰り返し用の記述です。

かんたんに言うと、commentNodeにmapでぐるぐるして生成したli要素たちをまとめてドカッと入れて、それをulで挟んで返しているわけですね!説明が適当すぎますね!私もいまだによく理解していません!

さらに、一番下のレンダリング部分。
ここで、定義されていないtagListなどを書くとエラーになっちゃうので、コメントリスト用の記述のみ残すことにします。
このとき、CommentListにdataを渡してあげます。

これでブラウザを見てみると、こんな感じになりました。

やったね!(∩´∀`)∩ワーイ

Chromeの開発ツールで見てみると、HTML構造もちゃんとモックのとおりになっています。

JSONを入れ子にする場合は…?

というわけでJSONのデータを読み込んでリストを繰り返し描画することはできたのですが、実際にはこのコメントのほかにも、記事のタイトルやタグなど、ほかの情報も必要ですよね。
そうなると、おそらくJSONは入れ子構造になるのではないかと思います。
たとえばこのように。

ということは、CommentListにdataを渡してあげるときは

こうなっちゃうんですよね(´ヘ`;)ウーム…

これでも問題なく描画はできています。
でも…2記事め以降はどうしたら・・・?
ここでまさかJSONのデータ数を取得してforでまわす???

ということで、まだまだ調査&挑戦は続きます!

React使ってSPAを作るよ目次

スポンサードリンク

菜摘

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

コメントを残す

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