學習React(16) - 在list裏使用index來做爲key

在上一篇中，稍微提了一下key的用法，現在又說一下。大家都知道，在數組裏，是有index來做下標的，那麼想要在列表裏表現出index, 那應該如何用react來表現一下呢。還是使用上一篇的Namelist.js 文件，只是這回沒有用Parson.js 文件。

現在就直接上Namelist.js文件代碼：

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

function Namelist() {
    const names = ['Bruce', 'Clark', 'Diana']
    const nameList = names.map((name,index) => <h2 key={index}>{index} {name}</h2>)

    return (
        <div>
            {
                nameList
            }
        </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;

結果如下：

---

這裏就稍微總結一下：
將index 做爲 key的時候，什麼情況下會用到呢？

1. The items in your list do not have a unique id.
2. The list is a static list and will not change.
3. The list will never be reordered or filtered.

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