记账本项目-首页UI组件开发

React理念–开发顺序

1、UI划分出组件层级
2、创建应用的静态版本

一、UI组件：PriceList

1、组件数据分析
item的数据、编辑响应与删除响应

  <Pricelist items={items}
    onModifyItem={}
    onDeleteItem={(item) => { alert(item.id) }} />

2、条目数据分析

const items = [
  {
    id: 1,
    content: '和炮炮一起吃饭',
    price: 100,
    date: '2022-03-10',
    category: {
      id: 1,
      name: "餐饮",
      type: "outcome"
    }
  }
]

3、布局选择：bootstrap的grid system与list-group
4、图标库选择：ionicons
5、prototypes属性检查

import PropTypes from 'prop-types'

Pricelist.PropTypes = {
    items: PropTypes.array.isRequired,
    onModifyItem: PropTypes.func.isRequired,
    onDeleteItem: PropTypes.func.isRequired
}
Pricelist.defaultProps = {
    onModifyItem: () => { }
}

二、UI组件：切换Tab组件

1、组件数据分析：
-当前选中的模式(lisr or chart)
-更改模式的响应函数(添加到点击事件上)

      <ViewTab 
      	current={currentModel}
        changeCurrent={setModel} />

新知识

三元运算符的使用
{(item.category.type === ‘income’ ? ‘+’ : ‘-’)}

三、日期选择控件

组件数据分析

<MonthSelect className='ml-10'
          year={year} month={month}
          setYear={setYear} setMonth={setMonth} />