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 => <li>{city}</li>)

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

ReactDOM.render(
  <ul>{cityList}</ul>,
  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) => <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值，可以使用其他属性显示的传递这个值：

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

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

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

    return (
        <ul>{ cityItems }</ul>
    );
}

function Blog(props) {
    const slidbar = (
        <ul>
            {props.posts.map((post) => 
                <li key={ post.id }>
                    { post.title }
                </li>
            )}
        </ul>
    );
    const content = props.posts.map((post) => 
        <div key={ post.id }>
            <h3>{ post.title }</h3>
            <p>{ post.content }</p>
        </div>
    );

    return (
        <div>
            { slidbar }
            <hr />
            { content }
        </div>
    )
}

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(
    <div>
        <CityList citys={ citys } />
        <hr />
        <Blog posts={ posts } />
        <hr />
    </div>,
    document.getElementById("demo-8")
)

实现的效果：

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