剧场模式
首页前端react 基础实践篇-小型财务系统

react 基础实践篇-小型财务系统 #2 实现 records 列表页

下载源码hfpp2012发布于React2515 次点击播放时长:12:26
4

源码:https://github.com/hfpp2012/react-accounts-app

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;
9 条回复
  • cs546175240 #1

    怎么跟第一集重复了

  • hfpp2012 #2

    不会重复呀

  • tomyZhou #3

    我的提示TypeError: Unable to get property 'date' of undefined or null reference

  • tomyZhou #4

    找到原因了,是因为我原来的那个没删

  • tomyZhou #5

    我的只有这样写才不会报错:{this.state.records.map((record,i) => )}

  • ZoroR #6

    声音太小了,听不清。。

  • hfpp2012 #7
    ZoroR #10 回复

    嗯 早期的时候 声音没处理得太多 后面的好多了 多谢支持

  • fengdian123 #8

    为什么不在Records组件里面给子组件Record添加一个key

  • loungcingzeon #9
    tomyZhou #10 回复

    import React, { PureComponent } from 'react';

    import Record from './Record';

    class Records extends PureComponent{

     constructor(props){
         super(props);
         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 className="records">
                 <h2>Records</h2>
                 <table className="table table-borderd">
                     <thead>
                         <tr>
                             <th>Date</th>
                             <th>Title</th>
                             <th>Amount</th>
                         </tr>
                     </thead>
                     <tbody>
                        <Record recordData={this.state.records}/>
                     </tbody>
                 </table>
             </div>
         );
     }
    

    }

    export default Records;

    import React, { PureComponent } from 'react';
    import PropTypes from 'prop-types';

    class Record extends PureComponent{
    static propTypes = {
    recordData: PropTypes.array.isRequired,
    }

    render(){
        const { recordData=[] } = this.props;
        console.log(recordData);
        return (
            recordData && recordData.map((item, index) => {
                return <tr key={index}>
                            <td>{item.date}</td>
                            <td>{item.title}</td>
                            <td>{item.amount}</td>
                        </tr>
            })
        );
    }
    

    }

    export default Record;

官方 QQ 群 697272886
相似的视频
react 基础实践篇-小型财务系统 #8 更新 Record

react 基础实践篇-小型财务系统 #8 更新 Record

免费播放时长:20:41

3466 次点击

react 基础实践篇-小型财务系统 #9 删除 Record

react 基础实践篇-小型财务系统 #9 删除 Record

免费播放时长:06:12

1324 次点击

react 基础实践篇-小型财务系统 #10 统计金额(完结)

react 基础实践篇-小型财务系统 #10 统计金额(完结)

免费播放时长:09:29

1691 次点击

react 基础实践篇-小型财务系统 #6 创建表单

react 基础实践篇-小型财务系统 #6 创建表单

免费播放时长:15:12

964 次点击

© Rails365 | 隐私条款 | 服务条款 | 加盟本站 | 粤ICP备15004902号 | 在线学员:11

Top