React如何對列表數據渲染以及key

列表數據在項目中很常見，身爲前端工程師的你幾乎天天都要與列表數據打交道，像新聞列表、用戶列表、流水列表等等。本篇文章主要討論在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")
)

以上代碼將問題完美解決掉了！好，先到這吧！