React如何渲染列表数据

列表数据在项目中很常见，身为前端工程师的你几乎天天都要与列表数据打交道，像新闻列表、用户列表、流水列表等等。本篇文章主要讨论在React.js中如何渲染列表数据。

1、将元素放到数组中直接渲染

之前曾经说过，一个数组直接放到JSX当中，那么会被直接展开。那么数组里直接存放元素内容呢？示例：

class Book extends React.Component{
    render(){
        return (
            <div>
                {[
                    <h3>射雕英雄传</h3>,
                    <h3>神雕侠侣</h3>,
                    <h3>倚天屠龙记</h3>
                ]}
            </div>
        )
    }
}
ReactDOM.render(
    <Book/>,
    document.querySelector("#wrap")
)

在浏览器中查看：

 

 

在元素中查看：

 

我们发现React.js 会将你数组里面的元素一个个罗列并且渲染出来。

2、将数组在外部定义然后渲染

// 定义一个数组
var bookArr=[
    {
        siteName:"百度",
        siteUrl:"http://www.baidu.com"
    },
    {
        siteName:"阿里巴巴",
        siteUrl:"http://www.alibaba.com"
    },
    {
        siteName:"腾讯",
        siteUrl:"http://www.qq.com"
    }
]
class Book extends React.Component{
    render(){
        // 定义数组，将元素放到该数组中
        var siteElements=[];
        bookArr.forEach((item)=>{
            siteElements.push(
                <div>
                    <p>网站：{item.siteName}</p>
                    <p>网站：{item.siteUrl}</p>
                    <hr/>
                </div>
            )
        })
        return (
            <div>
                {siteElements}
            </div>
        )
    }
}
ReactDOM.render(
    <Book/>,
    document.querySelector("#wrap")
)

上面的示例中，首先定义了一个数组存放数据，然后将数组的数据进行遍历，生成元素后放到一个新数组中。然后再将这个新数组放到JSX里面。效果如下：

 

3、使用map对数据进行渲染

在上面那个示例中，你会发现循环构建列表很麻烦，有没有什么办法 可以帮助我们更好的对数据进行渲染呢？我们可以通过ES6的map方法对其进行渲染。

// 定义一个数组
var bookArr=[
    {
        siteName:"百度",
        siteUrl:"http://www.baidu.com"
    },
    {
        siteName:"阿里巴巴",
        siteUrl:"http://www.alibaba.com"
    },
    {
        siteName:"腾讯",
        siteUrl:"http://www.qq.com"
    }
]
class Book extends React.Component{
    render(){
        return (
            <div>
                {
                    bookArr.map((item)=>{
                        return(
                            <div>
                                <p>网站：{item.siteName}</p>
                                <p>网站：{item.siteUrl}</p>
                                <hr/>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
ReactDOM.render(
    <Book/>,
    document.querySelector("#wrap")
)

这里实现的效果与之前的效果是一样的。但是简单了许多。

我的天呐！代码写到这里居然飘红报错啦！

代码貌似一切那么平和，现在打开控制台看一下：

 

 

对于用表达式套数组罗列到页面上的元素，都要为每个元素加上 key 属性，这个 key 必须是每个元素唯一的标识。key可以在DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。所以需要给数组每一个元素增加一个唯一的标识。
一般可以将后台返回的ID作为key值，因为后台返回的ID都是唯一的。
所以需要将代码进行如下的调整，为其添加一个key。

// 定义一个数组
var bookArr=[
    {
        siteName:"百度",
        siteUrl:"http://www.baidu.com"
    },
    {
        siteName:"阿里巴巴",
        siteUrl:"http://www.alibaba.com"
    },
    {
        siteName:"腾讯",
        siteUrl:"http://www.qq.com"
    }
]
class Book extends React.Component{
    render(){
        return (
            <div>
                {
                    bookArr.map((item,index)=>{
                        return(
                            <div key={index}>
                                <p>网站：{item.siteName}</p>
                                <p>网站：{item.siteUrl}</p>
                                <hr/>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
ReactDOM.render(
    <Book/>,
    document.querySelector("#wrap")
)