學習React(15) - 列表渲染 (list rendering)

在做網站時，大部分時候我們都需要在網址上做列表，比如說姓名列表等。那麼在React裏，應該如何實現這個功能呢？那就請看這篇博客吧！

在src文件夾下面創建一個名爲Namelist.js 文件，下面是代碼：

// Namelist.js 文件
import React from 'react'

function Namelist() {
    const names = ['Bruce', 'Clark', 'Diana']
    return (
        <div>
            // 第一種寫法
            <h2>
                {names[0]}
            </h2>
            <h2>
                {names[1]}
            </h2>
            <h2>
                {names[2]}
            </h2>
        </div>
    )
}

export default Namelist

在App.js 文件裏：

// App.js 文件
import React from 'react';
import './App.css';
import Namelist from './Namelist'


function App() {
  return (
    <div className="App">
      <Namelist/>
    </div>
  );
}

export default App;

結果如下：

---

有人會問了，這是第一種寫法，那麼還有沒有其他種寫法呢？答案是有的，請看下面：
還是在 Namelist.js 文件裏

// Namelist.js 文件
import React from 'react'

function Namelist() {
    const names = ['Bruce', 'Clark', 'Diana']
    return (
        <div>
            // 第二種寫法
        	{
                names.map(
                    name => 
                        <h2>
                            {name}
                        </h2>
                )
            }
        </div>
    )
}

export default Namelist

在App.js文件裏，還是跟上面的一樣，結果還是一樣的。

---

第三種寫法：

// Namelist.js 文件
import React from 'react'

function Namelist() {
    const names = ['Bruce', 'Clark', 'Diana']
    const nameList = names.map(name => <h2>{name}</h2>)
    return (
        <div>
            // 第三種寫法
        	{
                nameList
            }
        </div>
    )
}

export default Namelist

App.js 文件還是跟上面一樣，結果同樣。

---

現在，有可能會人要問了，如果一個數組裏的每一個index內容不僅僅是名字而已，比如說年齡等。這應該如何來實現呢？這個彆着急，下面的代碼就會給出：

// Namelist.js 文件
import React from 'react'

function Namelist() {
    const persons = [
        {
            id: 1,
            name: 'Bruce',
            age: 30,
            skill: 'React'
        },
        {
            id: 2,
            name: 'Clark',
            age: 20,
            skill: 'Angular'
        },
        {
            id: 3,
            name: 'Diana',
            age: 35,
            skill: 'Vue'
        }
    ]

    const personList = persons.map(person => (
        <h2>
            {person.name}, {person.age}. 
        </h2>
    ))
    
    return (
        <div>
            {
                personList
            }
        </div>
    )
}

export default Namelist

在App.js 文件裏，還是跟上面一樣，只是結果得改變了，下面是結果截圖：

---

如果想用額外的文件來HTML裏的內容呢，這改如何做呢？那麼就得先在src文件夾下面創建一個名爲Person.js 文件，內容如下：

// Person.js 文件
import React from 'react'

function Person({person, key}) {
    return (
        <div>
            <h2>
                {key} {person.name}, {person.age}. 
            </h2>
        </div>
    )
}

// 這個是未使用key 的，即使能有結果出來，但是這樣會不好，得保證每個list裏的內容保持獨一無二
// 如果要用這個函數，就得使用Namelist.js 裏的另外一個方法，博主已經將它註釋了
// function Person({person}) {
//     return (
//         <div>
//             <h2>
//                 {person.name}, {person.age}. 
//             </h2>
//         </div>
//     )
// }

export default Person

那麼在Namelist.js 問價裏應該如何調用這個Person.js 文件呢：

// Namelist.js 文件
import React from 'react'
import Person from './Person.js'

function Namelist() {
    const persons = [
        {
            id: 1,
            name: 'Bruce',
            age: 30,
            skill: 'React'
        },
        {
            id: 2,
            name: 'Clark',
            age: 20,
            skill: 'Angular'
        },
        {
            id: 3,
            name: 'Diana',
            age: 35,
            skill: 'Vue'
        }
    ]

    // Key prop is a special attribute you need to include when creating lists of elements
    // Key 的值必須是獨一無二的
    const personList = persons.map(person => <Person key={persons.id} person={person} />)

	// 沒有key 的寫法
	// const personList = persons.map(person => <Person person={person} />)
    return (
        <div>
            {
                personList
            }
        </div>
    )
}

export default Namelist

結果如下：

---

額外提一下：

1. A “key” is a special string attribute you need to include when creating lists of elements
2. Keys give the elements a stable identity
3. Keys help React identify which items have changed, are added, or are removed.
4. Help in efficient update of the user interface.

如果大家覺得寫的不錯的話，就用點贊來代替五星好評吧！