Edited at

React.jsでループするには。


自己紹介

じゅんじゅんというニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪の新2回生です👍 (2016.7.18現在)

よくstart up系イベントに行くので、大阪らへんの方は会いましょう!

では、早速。


ループ

僕自身、普段はjQuery、Vue.js、Angular.js、Riot.js、Reactなどを使っています。

その中でも、JavaScriptの配列をループで回して要素に当て込んで行きたい時ありますよね。

例えば、vue.jsなら

<ul id="app">

<li v-for="item in items">{{item.text}}</li>
</ul>

new Vue({

el: "#app",
data: {
items: [
{ text: "1" },
{ text: "2" }
]
}
});

みたいなやつですね。

Angularだとどうなるでしょうか。

<ul>

<li ng-repeat="item in items">{{item.text}}</li>
</ul>

$scope.items = [

{ text: "1" },
{ text: "2" }
];

こんな感じにVueにはv-forなど、angularにはng-repeatがありますね。

では、 Reactはどうでしょうか。

React.jsのJSXで条件分岐・繰り返しを記述する

こんな記事を見つけました。

他の記事をあさってみても、Reactに関してはこのループが存在しないようです。

※ あるぞボケ!って方いたらコメントしてください。。


Reactでループするには。

先ほどの記事のように、htmlを記述している場所に直接mapなどを使って描く方法があります。

Reactでは{...}の中であればJavaScriptとして認識されるようで

その中に関数を仕込みループさせる方法です。

<ul>

{this.state.datas.map((data) => {
return <li>{data.text}</li>;
})}
</ul>

この方法とは別にStack over flowにもよく載っていて、Reactの開発元であるFacebook社の書き方を見てみると

render: function(){

var list = [];

var data = [
{ text: "1" },
{ text: "2" }
];

for(var i in data){
list.push(<li>{data[i].text}</li>);
}

return(
<ul>
{list}
</ul>
);
}

forなどで、先に配列に要素を追加しておいて、表示部分はその配列だけ書いとくパターンです。

fluxにおいても、後者の書き方をしていました。

facebook/flux

どちらがいいとかはないですが、参考ほどに。