# 列表渲染 ## 基礎列表 可以使用 `map()` 取出列表的每一項進行渲染: ```jsx function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li>{number}</li> ); return ( <ul>{listItems}</ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') ); ``` 運行這段代碼的時候，會產生一個警告: >[warning] Warning: Each child in an array or iterator should have a unique "key" prop. ## keys 要消除警告，需要給每個列表元素分配一個 key 來解決上面的那個警告： ```jsx function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ); return ( <ul>{listItems}</ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') ); ``` Keys可以在DOM中的某些元素被增加或刪除的時候幫助React識別哪些元素發生了變化。因此需要給數組中的每一個元素賦予一個確定的標識。 一個元素的key最好是這個元素在列表中擁有的一個獨一無二的字符串或數值。通常，我們使用來自數據的id作為元素的key: ```jsx const todoItems = todos.map((todo) => <li key={todo.id}> {todo.text} </li> ); ``` 當元素沒有確定的id時，你可以使用他的序列號索引 index 作為 key: ```jsx const todoItems = todos.map((todo, index) => <li key={index}> {todo.text} </li> ); ``` 元素的key只有在它和它的兄弟節點對比時才有意義。 記住，在map()方法的內部調用元素時，記得為每一個元素加上一個獨一無二的key！