Reactに挑戦してみる 12
概要
Reactに挑戦してみる12。
参考書籍
WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用
- 作者: 柴田文彦
- 出版社/メーカー: インプレス
- 発売日: 2016/11/25
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
配列要素を自動的に展開して表示するmapメソッド
reactではforが使えないので、代わりに、mapメソッドを使う。
// 配列としてオブジェクトに渡す var tableData = [ {id: 1, name: '山田太郎', area: '東京都港区', number: '8513321'}, {id: 2, name: '鈴木次郎', area: '神奈川県横浜市', number: '1234567'}, {id: 3, name: '田中さん', area: '東京都新宿区', number: '9898888'} ] var DispTable = React.createClass({ render: function(){ // map(function(person)の箇所で、mapメソッドを定義する。mapメソッドが、functionを引数にとっている。という意味のコード。 var tableBody = this.props.data.map(function(person){ return (<tr key={person.id}> <td>{person.name}</td> <td>{person.area}</td> <td>{person.number}</td> </tr>); }); return (<table className="regularTable"> <thead> <tr> <th>名前</th> <th>地域</th> <th>番号</th> </tr> </thead> // ボディ部分は、mapメソッドを評価して返す。 <tbody>{tableBody}</tbody> </table>); } }); ReactDOM.render( <DispTable data={tableData} />, document.getElementById('content') );
これは慣れるのちょっと時間かかりそうだな(^ ^;)
JSX, Javascript, React, HTMLの違いをある程度理解してる必要があるなぁ。