LoginSignup
157

More than 3 years have passed since last update.

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

Last updated at Posted at 2016-07-18

自己紹介

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
157