码迷,mamicode.com
首页 > Web开发 > 详细

react.js基本操练

时间:2016-09-13 19:02:23      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

慢慢了解其它的JS前端框架。。。

var data = [{ "when": "2 minutes ago",
  "who": "Jill Dupre",
  "description": "Created new account"
},
{
  "when": "1 hour ago",
  "who": "Lose White",
  "description": "Added fist chapter"
},
{
  "when": "2 hours ago",
  "who": "Jordan Whash",
  "description": "Created new account"
}];
var headings = ["Last updated at", "By Author", "Summary"]
var title = "Recent Changes";


var App = React.createClass({
    render: function(){
    var headings = this.props.headings.map(function(heading) {
    return(<th>
{heading}
</th>);
});
var rows = this.props.data.map(function(row){
return <tr>
<td>{row.when}</td>
<td>{row.who}</td>
<td>{row.description}</td>
</tr>
})

return <div><h1>{this.props.title}</h1><table>
<thead>
{headings}
</thead>
{rows}
</table></div>
}
});

React.render(<App headings={headings} data={data} title={title}/>,
document.body);

技术分享

react.js基本操练

标签:

原文地址:http://www.cnblogs.com/aguncn/p/5869233.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!