剧场模式
首页前端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是怎么实现和运用的,你视频上都是直接写上去了~

  • 求知小风 · 真仙
    求知小风 · 真仙 #11

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

  • cl561106 · 练虚
    cl561106 · 练虚 #12

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

    这样还是不行啊~~

  • 求知小风 · 真仙
    求知小风 · 真仙 #13

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

  • fmheart · 真仙
    fmheart · 真仙 #14

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

  • 求知小风 · 真仙
    求知小风 · 真仙 #15

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

  • fmheart · 真仙
  • 求知小风 · 真仙
    求知小风 · 真仙 #17

    你这个是 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 版本不一样 一样试会不太一样

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 关注我们 | 在线学员:130

Top