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

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

海外散仙厉飞雨 · 化神发布于
7

源码: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;
25 条回复
  • cs546175240 · 元婴
    cs546175240 · 元婴 #1

    怎么跟第一集重复了

  • 想卖咖啡的程序员 · 元婴

    不会重复呀

  • tomyZhou · 元婴
    tomyZhou · 元婴 #3

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

  • tomyZhou · 元婴
    tomyZhou · 元婴 #4

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

  • tomyZhou · 元婴
    tomyZhou · 元婴 #5

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

  • ZoroR · 元婴
    ZoroR · 元婴 #6

    声音太小了,听不清。。

  • 想卖咖啡的程序员 · 元婴

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

  • fengdian123 · 练虚
    fengdian123 · 练虚 #8

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

  • loungcingzeon · 合体

    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 · 练虚
    cl561106 · 练虚 #10

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

  • 想卖咖啡的程序员 · 元婴

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

  • cl561106 · 练虚
    cl561106 · 练虚 #12

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

    这样还是不行啊~~

  • 想卖咖啡的程序员 · 元婴

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

  • fmheart · 真仙
    fmheart · 真仙 #14

    react不是不能和 bootstrap一起使用吗?为什么这个课程只需要引入一个文件就可以了啊?

  • 想卖咖啡的程序员 · 元婴

    谁说不能,能啊,引入样式就行了

  • fmheart · 真仙
  • 想卖咖啡的程序员 · 元婴

    你这个是 react 版本的 bootstrap ,任何ui 库,都可以只引用 css 就能用到样式了,这个项目只是用到了样式,所以只要引入 css 文件,把 class 改成 bootstrap 的就有样式就行了。

  • fmheart · 真仙
    fmheart · 真仙 #18

    噢哦,好的。谢谢你的回复、、

  • starvation · 元婴
    starvation · 元婴 #19

    {this.state.records.map((record, index) => )}

  • starvation · 元婴
    starvation · 元婴 #20

    {this.state.records.map((record, index) => )}

  • HEIWMM · 元婴
    HEIWMM · 元婴 #21

    声音好轻柔,听着想睡觉

  • HEIWMM · 元婴
    HEIWMM · 元婴 #22

    totally agree

  • 招财加菲猫 · 合体

    bootstrap 相当于写好的style css包 有俩总方式cdn link 进来 网站render 过程中会自动下载 另一种 下载到本地 打包一个bootstrap 好处在于断网的时候 也能有格式render出来 不好的是 教学中 和 教学中bootstrap 版本不一样 一样试会不太一样

  • 招财加菲猫 · 合体

    index.js:1375 Warning: Each child in a list should have a unique "key" prop.

    Check the render method of Records. See https://fb.me/react-warning-keys for more information.
    in TbRecord (at Records.js:29)
    in Records (at src/index.js:7)

    我这里这个报错,我有点乱 找不出来问题,还有就是 record文件define 的class的事为啥用records export 也是records 貌似没影响。

  • 招财加菲猫 · 合体

    bootstrap 相当于写好的style css包 有俩总方式cdn link 进来 网站render 过程中会自动下载 另一种 下载到本地 打包一个bootstrap 好处在于断网的时候 也能有格式render出来 不好的是 教学中 和 教学中bootstrap 版本不一样 一样试会不太一样

小程序(beta)抖音服务号订阅号
随机课程
程序世界之速成课

程序世界之速成课

6 个视频1 小时 38 分钟中级

Pro¥ 39.00¥ 31.20

其他其他已完结

学员
xiaoxi · 真仙骑龙 · 太乙Asia Li · 大乘owenyikong · 道祖Yinsijuan · 元婴招财加菲猫 · 金仙Actor · 大罗凡 · 元婴sailorook · 金仙River- · 大乘imlhk · 元婴冀宇航 · 真仙阳光才是真美 · 合体kuangcaobaihuzi · 道祖Hichank · 太乙Tracy · 太乙BJTK · 元婴倩倩🍉🍉🍉 · 元婴zbx7858 · 道祖Jean · 真仙雪在烧 · 元婴wjfc · 太乙Sine · 合体娜娜 · 太乙sunlee · 合体lipengcheng0708 · 元婴李卓 · 元婴syy · 元婴Blue米 · 大乘mfkyddh · 金仙初十五 · 元婴星空瀚海 · 化神kaixuan1992 · 道祖lqp336699 · 真仙netNowork · 大乘Matthew · 道祖chloris · 太乙swip · 合体CunFlower · 合体zuoyueqin · 真仙TaiheChen · 合体HEIWMM · 元婴liar · 真仙丶积木 · 元婴ZhenqianLiu · 大乘yhuyo · 道祖🦁 · 合体Youth · 元婴guxiaobai · 道祖健男-春 · 合体miaozilong · 合体JooSmith · 合体韦威 · 真仙思进 · 大乘dadawanan · 元婴me · 元婴LUOT · 元婴nanaguo · 合体15732781134 · 合体damofan · 大罗ttyring · 元婴caspertu · 真仙chenjimin132 · 合体suntong233 · 元婴FastTurbo · 道祖linmiaomiao123 · 元婴开心就好 · 合体Qujoe · 合体ttswh2009 · 太乙super · 大乘twoheart · 大罗whting · 元婴itlaowang520 · 金仙jixiyu · 元婴吴盛威 · 真仙QiangMicro · 元婴PhilChina · 元婴YJwsl · 练虚00Jane · 合体baozaomiaomiao · 合体子非鱼 · 真仙xiaofeine · 元婴qq540618173 · 元婴libin · 大乘wangerpei333 · 金仙haiyangzhaoo · 元婴hyt9796 · 大乘suzhi82 · 合体HytonightYX · 元婴lbb · 合体zhuofan · 大罗TX_MIGwangshi · 元婴linhaijian · 元婴Messi-Q · 元婴samuelshang · 太乙QQ741404277 · 练虚liaokui · 元婴
最新动态
xiaoxi · 真仙学习到了12:44
骑龙 · 太乙学习到了2:03
Asia Li · 大乘学习到了12:44
owenyikong · 道祖学习到了12:44
Yinsijuan · 元婴学习到了12:37
统计信息
    学员: 14382
    视频数量: 824
    帖子数量: 418

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:116

Top