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


React使ってSPAを作るよ目次

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

ReactでJSONの入れ子データを渡す

前回悩んでいた、入れ子になっているコメントリストのデータをどうやって渡すかという問題。これを解決すると同時に、articleそのものもリスト化して描画してしまいましょう。

まずはJSONデータを3件に増やしておきます。せっかくなので元のモックにある記事リンクの要素も追加しておきますね。commentDataをネストした構造はそのままです。

そして、記事リストをコンポーネント化します。
ここでちょっと問題が。

mapで生成したノード群をレンダリングする際に、「ルートになる親要素」に格納する必要がある、ということで・・・
li要素をmapで生成したら、親要素、つまりulをコンポーネント側で用意しなければなりません。
すると、React.render()でそれを格納する親要素が必要になります。
本当はul自体にli群を格納したいんですけど…
あとで解決策を探したいです。

ってことで、index.html側のソースを変更します。

#article-listを格納するdiv、#containerを用意しました。

JSXのレンダリング部分は、

となりますね。

クッ……ヤラ( ゚∀゚ )レタ!!!

よけいなdivが・・・

で、本題の記事リストコンポーネントはこうなります。

コメントリストのときと同じ感覚で、articleNodeにリストをドカッと入れることにします。
このとき、articleCommentに、JSONで入れ子になっているcommentDataを入れて渡してあげます。
(子のコンポーネント側でthis.props.commentDataとかでできたらいいなと思ってたんですが、できませんでした)

そして、子のコンポーネントを作ります。

ちょっとわかりやすくするためにa要素部分のコンポーネントは用意しないでここに直接書いちゃいました。
articleUrlなどはそのまま受け取ってリンクを生成し、コメントリストの部分は前回作ったコンポーネントCommentListを引っ張ってきます。

Reactの、親から子へ、という流れとソースの順序が逆になってるせいで説明がわかりづらいかもしれません・・・すみません(;´Д`)

app.jsxのソースは最終的にこうなります。

ブラウザで表示するとこんな感じです。

react

ちゃんと、記事リスト2には2のデータが入っていますね!
よしよし( ´∀`)bグッ!

次回はほかのパーツも組み込んでいきます。
そうなるとJSONデータもかなり膨大になってくるので、別ファイルにしたいですね。外部のAPIを叩いて取得したりする使い方もありそうなので、コンポーネントを整理していきたいと思います。

React使ってSPAを作るよ目次