React 制作简单的购物车

刚刚开始接触React,于是做了一个简单的购物车练练手
先上一下效果图:

在做这个购物车前,先分析好购物车的结构,该怎么分割组件,怎么组合组件,组件里用具备那些功能,组件间应该怎么通信等.
以下为实现步骤:

第一步,先画图,分割组件

如上图结构所示,把购物车分隔为ShopCar,ShopRow,TotalBlock这三个组件,
ShopCar 代表购物车表格,也就是购物车内容的总和
ShopRow 代表购物车里的每一项商品的信息
TotalBlock 代表购物车总价

有了这三个组件,接着就确认三个组件的关系:

可以开出,ShopCar包含ShopRow和TotalBlock,也就是我们应该把ShopRow和TotalBlock的状态提升到ShopCar,这两个组件所需要的信息由ShopCar来提供

第二步,分析各组件的结构以及所需要的属性和功能

1.先分析ShopRow(每一项商品的信息)
ShopRow是一个表格行,其中每一列的分别包含[商品图片,商品名称],商品数量,商品单价,商品总价,选中状态
于是得到以下结构

接着分析ShopRow所需的属性和功能
ShopRow的图片,名称,等信息由ShopCar里的商品信息数组提供,于是得出以下属性和行为:
1. img: 商品图片
2. name: 商品名称
3. count: 商品数量
4. price: 商品单价
5. totalPrice: 商品总价
6. isChecked: 商品选中状态
7. handleCheck: 改变商品选中状态的行为
8. handleCountChange: 改变商品数量的行为