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

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

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

源码: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;
13 条回复
  • 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;

  • cl561106 #10

    问下bootstrop是怎么实现和运用的,你视频上都是直接写上去了~

  • hfpp2012 #11
    cl561106 #10 回复

    只要引入一个 css 文件就好了,在 public/index.html 文件中

  • cl561106 #12
    hfpp2012 #10 回复

    就是在写button的时候你是这样写的按钮,btn btn-primary中间的空格是不用那webpack配置么?直接在index.html中引入bs就可以了么?

    这样还是不行啊~~

  • hfpp2012 #13
    cl561106 #10 回复

    你还是不够细心呀,不是 bootstrap-grid ,而是 bootstrap 。空格的原理是这是 class 呀,你没学过 css 吗?

支付宝付款
微信扫码打赏

加我微信:15014006126

加 QQ 群:697272886(1 群)

加 QQ 群:856141852(2 群)

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

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

免费播放时长:20:41

3879 次点击

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

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

免费播放时长:09:29

2062 次点击

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

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

免费播放时长:06:12

1617 次点击

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

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

免费播放时长:15:12

1328 次点击

© Rails365 | 隐私条款 | 服务条款 | 粤ICP备15004902号 | 在线学员:9

Top