React.js：列表，map，key

接下来我们实现一个前端页面，基本需求如下：

1. 一个列表，包含所有商品的信息（名称，单位，单价，优惠信息），每个item可以加入购物车，并且可以选择加入购物车的商品数量。
2. 一个购物车页面，从列表页面可以进入购物车页面，购物车页面列出所有你选择的商品。
3. 确认购买后，将购物车内的信息传到后端。

今天先看第一个需求，商品列表。emmm...
我们可以把页面看成一个包含多个 Item 组件的 List 组件，至于Item中调整数量的部分，我们已经有 Counter 了，所以，主要任务就是实现 Item 组件，以及 ItemList 组件。

组件结构

我们的页面大致是这样：

商品列表组件 ItemList，其中包含多个 Item 组件，每个 Item 组件，用于显示单一商品信息，其中包含一个 Counter 组件。

先来写结构，大概还记得组件的嵌套吧？

新建 Item.js：

import React,{Component} from 'react';

class Item extends Component{
    render(){
        return(
            

                Item
                
            
        )
    }
}

export default Item

新建 ItemList.js：

import React,{Component} from 'react';

class ItemList extends Component{
    render(){
        return(
            

                ItemList
                
            
        )
    }
}

export default ItemList

直接在 index.js 中将 ItemList 渲染到页面：

ReactDOM.render(, document.getElementById('root'));

到此为止，ItemList 中包含了一个 Item，这个 Item 中又包含了一个 Counter：

列表

假设商品列表的数据，存放在 ItemList 中的一个数组当中：

const items = [
    {barcode: 'ITEM000000', name: '可口可乐', unit: '瓶', price: 3.00},
    {barcode: 'ITEM000001', name: '雪碧', unit: '瓶', price: 3.00},
    {barcode: 'ITEM000002', name: '苹果', unit: '斤', price: 5.50},
    {barcode: 'ITEM000003', name: '荔枝', unit: '斤', price: 15.00},
    {barcode: 'ITEM000004', name: '电池', unit: '个', price: 2.00},
    {barcode: 'ITEM000005', name: '方便面', unit: '袋', price: 4.50}
]

最直观的做法，构建6个 Item 组件，并分别将 name，unit，price 传入，Item 组件中接收传入的数据并显示。先来改写 Item 组件，通过 props 使用。
当然应该没有人会那么做吧……我们直接在 ItemList 中 构建列表，并给在构建每个子组件 Item 时通过属性设置 传入Item 对象，在 Item 组件中通过this.props.item.xxx使用传入的 item 的数据，以此构建出 JSX 元素。
先在 Item 组件中接收数据，并为元素添加上样式。

...
 render(){
    return(
        

            

                {this.props.item.name}
                 
                     {this.props.item.price}元/{this.props.item.unit}
                
            
            
        
    )
}
...

给 Item 组件中加了默认值后的效果：

在 ItemList 组件中，你可以通过遍历，构建列表：

render(){
    var itemList = []
    for(let item of items){
        itemList.push()
    }
    return(
        {itemList}
    )
}

当然，也可以使用 ES6 的 map，看起来更加简洁：

render(){
    return(
        {items.map(item => ()}
    )
}

上面的代码中，我们使用操作符 => 定义了一个临时函数，左边的括号中为输入的参数（单个 Item 对象），右边的花括号中是函数体，内容为对数据进行的操作以及返回值（对每个 Item 对象，返回一个 Item 组件实例）。

这两种创建列表方法的效果一致：

key

看起来还不错，但是，但是，但是，console 不高兴了。

unique "key"，emmm.... 既然你要，那就给你好了。

好了没有 Warning 了，问题解决，大快人心。

但是，
不是你要我加我就加的，那我岂不是很没面子。
为什么需要这样一个属性呢？

可以说，这个 unique key 和数据库中的 primary key 差不多，都是为了对数据进行 唯一标识。我们在给列表中的 子组件 设置 key 值的时候，尽量保证其唯一性，当然直接使用数据的 后台ID 是最好不过了。
一个 key 对应一个组件，当组件需要移动和组件之间需要交换的时候，也就是涉及到数组 动态变化 的时候，可以方便 React.js 快速找出列表中需要重新渲染的组件，来 避免重新渲染整个列表，节省开销。如你所见，这个属性 key 是 React.js 作为内部数据使用的，我们虽然把 key 传给了子组件，但是在子组件的内部，是无法通过 props 访问的。
不过，在商品列表的例子中，Item 数组中的数据仅仅用于展示，没有涉及到数组的变更，使用遍历中的 index 作为 key，也是没有问题的。

然后，我们再加上“优惠信息”，简单处理一下显示效果：

const promotions = [
    {
      type: 'BUY_TWO_GET_ONE_FREE', 
      barcodes: ['ITEM000000', 'ITEM000001', 'ITEM000005']
    }
]

...
getCommodityPromotions(barcode){
    let promotionsType = null;
    promotions.map(promotion => {
        if(promotion.barcodes.includes(barcode)){
            promotionsType = promotion.type === "BUY_TWO_GET_ONE_FREE" ? "【买二赠一】" : promotion.type
        }
    })
    return promotionsType
}


...

在 Item 中通过 this.props.promotion 显示。再给 ItemList 加上标题，按钮，样式。丑是丑，但这个页面的基本元素已经完成的差不多了。

今天就到这里了。