React学习之列表

Love The Way You Lie 2022-12-03 05:26 156阅读 0赞

### **说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][https_github.com_Brucewu998_react.js-learning]，笔者会不断更新这些代码，本篇代码在目录下demo-08文件夹下。** ###

在本系列第二篇：[React学习之元素渲染][React]中，讲到了数组的渲染属于React的列表渲染；在JavaScript中，我们可以使用map()函数来遍历数组，然后得到新的列表：

const numbers = []1,2,3];
    const newNumbers = numbers.map(num => num * 2);
    console.log(newNumber); //[2,4,6]

同样，在React中也可使用map()方法，通过遍历一个JavaScript数组，将数组张的每个元素插入相应的HTML标签中，最后得到相应的元素列表：

const citys = ["广州", "深圳", "北京", "上海"];
    const cityItem = citys.map(city => <li>{city}</li>)

这个时候当我们把整个citysItem插入到<ul>中，然后渲染到DOM中：

ReactDOM.render(
      <ul>{cityList}</ul>,
      document.getElementById('demo-7')
    );

结果得到：

![20200902002407915.png][]

但当我们运行代码的时候会发现控制台会有相应的警告：**a key should be provided for list items**，因为在React中创建列表元素时，每个元素必须包含对应的**key**属性，因为这个属性可以帮助React识别那些元素改变，例如添加或者删除，所以给一个key相当于给每个元素赋予一个标识，这个标识我们在设定的时候最好时独一无二的字符串：

const citys = [
        {key: "guangzhou", value: "广州"},
        {key: "shenzhen", value: "深圳"},
        {key: "beijing", value: "北京"},
        {key: "shanghai", value: "上海"}
    ];
    const cityItems = citys.map((item) => <li key={ item.key }>{ item.value }</li>);

当列表不存在key时，我们可以在也可在遍历的时候将index作为key:

const citys = ["北京", "上海", "广州", "深圳"];
    const cityItem = citys.map((city, index)=> <li key={index}>{city}</li>)

有一点需要注意的是，key会传递消息给React，但不会把消息传递给我们写的组件，如果我们需要使用到key值，可以使用其他属性显示的传递这个值：

关于上面的所有知识点，整理成下面的demo， [demo8\_列表key.html可以看到完整件代码][demo8_key.html]，核心代码如下：

实现的效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzM4OTgz_size_16_color_FFFFFF_t_70][]

**上一篇： [React学习之条件渲染][React 1]**

[https_github.com_Brucewu998_react.js-learning]: https://github.com/Brucewu998/react.js-learning
[React]: https://blog.csdn.net/qq_37338983/article/details/108161726
[20200902002407915.png]: /images/20221123/b0aa24564abe4427b7d18688e4b36f8b.png
[demo8_key.html]: https://github.com/Brucewu998/react.js-learning/blob/master/demo-08/demo8_%E5%88%97%E8%A1%A8key.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzM4OTgz_size_16_color_FFFFFF_t_70]: /images/20221123/80618acb1f2e4a0188224103c7bc4609.png
[React 1]: https://blog.csdn.net/qq_37338983/article/details/108331897