React学习之列表

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

在本系列第二篇：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 => 
{city}
)

这个时候当我们把整个citysItem插入到

中，然后渲染到DOM中：

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

结果得到：



但当我们运行代码的时候会发现控制台会有相应的警告：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) => 
{ item.value }
);

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

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

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

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

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

function CityList(props) {
    const citys = props.citys;
    const cityItems = citys.map((item) => 
{ item.value }
);

    return (
        
{ cityItems }
    );
}

function Blog(props) {
    const slidbar = (
        

            {props.posts.map((post) => 
                

                    { post.title }
                
            )}
        
    );
    const content = props.posts.map((post) => 
        

            
{ post.title }
            
{ post.content }
        
    );

    return (
        

            { slidbar }
            

            { content }
        
    )
}

const citys = [
    {key: "guangzhou", value: "广州"},
    {key: "shenzhen", value: "深圳"},
    {key: "beijing", value: "北京"},
    {key: "shanghai", value: "上海"}
];

const posts = [
    {id: 1, title: "Hello World", content: "Welcome to learning React!"},
    {id: 2, title: "Installation", content: "You can install React from npm."}
];

ReactDOM.render(
    

        
        

        
        

    
,
    document.getElementById("demo-8")
)

实现的效果：



上一篇： React学习之条件渲染