React快速开发迷你记账簿------day02 实现 records 列表页

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35812380/article/details/83542009

src/components/Records.js

import React, { Component } from 'react';
import Record from './Record';

class Records extends Component {
  constructor() {
    super();
    this.state = {
      records: [
        {"id": 1, "date": "2018-01-09", "title": "收入", "amount": 20},
        {"id": 2, "date": "2018-01-03", "title": "录视频收入", "amount": 199},
        {"id": 2, "date": "2018-01-03", "title": "录视频收入", "amount": 199},
      ]
    }
  }

  render() {
    return (
      <div>
        <h2>Records</h2>
        <table className="table table-bordered">
          <thead>
            <tr>
              <th>Date</th>
              <th>Title</th>
              <th>Amount</th>
            </tr>
          </thead>
          <tbody>
            {this.state.records.map((record) => <Record record={record} />)}
          </tbody>
        </table>
      </div>
    );
  }
}

export default Records;

src/components/Record.js

import React, { Component } from 'react';

class Records extends Component {
  render() {
    return (
      <tr key={this.props.record.id}>
        <td>{this.props.record.date}</td>
        <td>{this.props.record.title}</td>
        <td>{this.props.record.amount}</td>
      </tr>
    );
  }
}

export default Records;