美文网首页
简单react示例

简单react示例

作者: debt | 来源:发表于2016-08-19 15:54 被阅读30次
var DATA = [{
  "status": "IN_PROGRESS",
  "amount": 600.0,
  "loan_time": "2016-08-12 16:07:00",
  "loan_limited": 1,
  "load_no": "JKM16081203NTD"
}, {
  "status": "IN_PROGRESS",
  "amount": 100.0,
  "loan_time": "2016-08-16 14:40:30",
  "loan_limited": 1,
  "load_no": "JKM16081603NTU"
}, {
  "status": "IN_PROGRESS",
  "amount": 500.0,
  "loan_time": "2016-08-16 16:29:58",
  "loan_limited": 1,
  "load_no": "JKM16081603NTW"
}, {
  "status": "IN_PROGRESS",
  "amount": 900.0,
  "loan_time": "2016-08-17 15:20:46",
  "loan_limited": 12,
  "load_no": "JKM16081703NTX"
}];

var React = require('react');
var ReactDOM = require('react-dom');

var List = React.createClass({
  render: function() {
    return (
      <div>
                  <ul ref='list'>
                {
                  this.props.user.map(function(node, i){
              return(
                    <li key={ i } ><p>账户余额:{ node.amount }</p>
                    {
                      node.status == 'IN_PROGRESS' ? '进行中' : '已完成'
                    }                  
                    <p> 借款日期:{node.loan_time}</p>
                     <p> 还款期限:{node.loan_time}</p>
                      <p> 还款编号:{node.load_no}</p>
                    </li>)})
              }
              </ul>
            </div>
    );
  }
});

Content = React.createClass(function() {
  render: function() {
    return (
      <div>
          <List  user=this.prop.data />

        </div>
    )
  }
})
ReactDOM.render(<Content data={DATA} />, document.getElementById('app'));

相关文章

网友评论

      本文标题:简单react示例

      本文链接:https://www.haomeiwen.com/subject/ejmbsttx.html