打开 cart.js .. 购物车页面上的项目列表现在用的是 Taro UI 里的复选框组件 .. 下面我们可以自己定义一个组件替代这个组件 .. 组件的名字是 CartItemList ..

组件接收一个 items 属性 .. 它的值就是一组要显示的购物车项目 ..

还需要一个 selected 属性，它表示的是当前选择的项目列表 .. 还有一个 onChange 属性 ..

在文件顶部 .. 导入这个组件 .. 名字是 CartItemList .. 位置是上一级目录的上一级目录下面的 components .. cart-item-list .

在项目下面创建一个新的组件，放在 components .. cart-item-list 下面 ..

先添加一个基本的组件 .. 名字是 CartItemList ..

保存一下 cart 页面 .. 可以再打开微信开发者工具的自动编译功能 .. 在设置 .. 编辑设置 .. 里 .. 勾选 保存时自动编译小程序 ..

现在保存文件的时候，开发者工具会自动刷新 ..

浏览到页面视图 .. 在 render 方法里，之前我们用了 map 生成了一组数据 .. 现在可以把它去掉 .. 然后直接把没处理过的 cart.items 交给组件的 items 属性 ..

继续再去编辑 CartItemList 组件 ..

设置一下组件的默认属性 .. 添加一个 static defaultProps .. 一个对象 .. 组件的属性有 selected .. 它是一个数组 .. 还有 items 属性 .. 它也是一个数组 ..

还有 className 属性 .. 默认它是一个空白 ..

下面再配置一下 .. 添加一个 static options .. 把它的 addGlobalClass 设置成 true ..

在组件的 render 方法里面，从组件的属性里解构一些东西 .. items .. selected .. 还有 className .. 它们都在 this.props 里面 ..

再添加一个 rootClassValue .. 它的值可以用一下 classNames 方法生成 .. 添加一个 list 类 .. 还有 className ..

在文件顶部导入需要的 classNames .. 来自 classnames 模块 ..

回到组件视图 .. 在这个包装上添加一个 className 属性，它的值是 rootClassValue ..

下面用一下 items 的 map .. 迭代一下 items 里的值 .. 一个 item 参数，还有一个 index 参数 .. 在 map 方法里 .. 从 item 里解构出来一些东西 ..

product_id ，重命名为 value .. 还有 name .. 重命名为 title .. item 里还有 image .. price .. quantity .. total ..

这个 map 每次迭代的时候 return 的是一个 View .. 在这个组件上添加一个 key .. 它的值是 value .. 再添加一个 className .. 它的值是 classValue .. 在上面再定义一个 classValue ..

它的值用 classNames 生成 ... 里面可以添加一个 list__item .. 等会儿会用到这个类去添加一些自定义的样式 ..

先在它里面添加一个 title ..

现在页面上会显示一组产品标题 .. 这些标题就是购物车里的项目的标题 ..