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} />