Reactに挑戦してみる 13
概要
Reactに挑戦してみる13。
参考書籍
WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用
- 作者: 柴田文彦
- 出版社/メーカー: インプレス
- 発売日: 2016/11/25
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
コンポーネント間の機能の共有~ マルチコンポーネント化
var tableColums = ['名前', '地域', '番号']; var tableData = [ {id: 1, name: '山田太郎', area: '東京都港区', number: '8513321'}, {id: 2, name: '鈴木次郎', area: '神奈川県横浜市', number: '1234567'}, {id: 3, name: '田中さん', area: '宮崎県宮崎郡', number: '9898888'} ]; // table header コンポーネント var TableHeader = React.createClass({ render: function(){ // titleプロパティのmapメソッドを定義して展開する。 var tableTitles = this.props.title.map(function(cName, i) { return (<th key={i}> {cName} </th>); }); return (<thead> <tr> {tableTitles} </tr> </thead>); } }); // table body コンポーネント var TableBody = React.createClass({ render: function() { // dataプロパティのmapメソッドを定義して展開する。 var tableRows = 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 (<tbody> {tableRows} </tbody>); } }); // 表全体を描くDispTableコンポーネント // var DispTable = React.createClass({ render: function(){ return (<table className="regularTable"> // titleプロパティ、dataプロパティを、それれぞれtitle, dataという名前のプロパティで、それぞれのコンポーネントに代入する。 <TableHeader title={this.props.title}/> <TableBody data={this.props.data}/> </table>); } }); // DispTableにtableColums、tableDataをtitle, dataという名前のプロパティとして代入する。 ReactDOM.render( <DispTable title={tableColums} data={tableData} />, document.getElementById('content') );
うーん、徐々に難しくなってきたなぁw