首先，我們來看下如何在JavaScript中轉換列表。
下面給出的代碼里，我們使用map()函數獲取一組數，然后加倍他們。我們將map()返回的新數組賦值給變量doubled，然后記錄它：
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
這代碼將[2, 4, 6, 8, 10]記錄到控制臺。
在React中，這與將數組轉換為元素列表幾乎相同。
渲染多個組件
在JSX中，你可以將元素放入花括號{}，來構建元素集合。
下面，我們使用JavaScriptmap()來遍歷numbers數組。每一項，我們返回一個<li>元素。最后，我們將返回的元素數組，賦值給listItems：
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
我們將整個listItems數組放入一個<ul>元素中，將他渲染到DOM。
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
在CodePen中試一試
此代碼顯示從1到5數字的點列表。
基本列表組件
通常你需要在一個組件中渲染列表。
我們可以將上個例子重構為一個組件：接受一組numbers，輸出一個未排序的元素列表。
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')
);
當你運行這份代碼時，你將得到一個應該提供鍵給列表項的警告。當你創建元素列表時，你需要加入一個特殊的字符串屬性作為“鍵”。我們會在下一節論述他的重要性。
讓我們在numbers.map()中給列表項賦予一個鍵，來修復丟失鍵的問題。
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')
);
鍵
鍵幫助React標識出哪些項發生了變化，哪些被添加或刪除。在數組中應該為元素指定鍵，來給元素一個固定的標識：
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
選擇鍵最好的方法是使用一個字符串來唯一表示一個列表項，使其與其他兄弟項不同。通常你可以將你數據中的ID作為鍵：
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
當你的渲染項沒有固定的ID時，有一個最后的手段：你可以使用項的索引作為鍵：
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);
如果項可以重新排序，我們不建議使用索引作為鍵。如果你感興趣的話，可以讀下深入解釋為什么需要鍵。
根據鍵抽取組件
鍵只有在數組直接的上下文中才有意義。
舉例來說，如果你抽取了一個ListItem組件，你應該將鍵放在數組元素<ListItem />上，而不是ListItem中的根元素<li>上。
示例：錯誤的鍵用法
function ListItem(props) {
const value = props.value;
return (
// Wrong! There is no need to specify the key here:
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Wrong! The key should have been specified here:
<ListItem value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
示例：正確的鍵用法
function ListItem(props) {
// Correct! There is no need to specify the key here:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Correct! Key should be specified inside the array.
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
在CodePen上試一試
一個很好的經驗法則：在map()中的元素需要鍵。
鍵在其兄弟中必須唯一
數組中使用的鍵，在其兄弟之間必須唯一。然而，他們不必全局唯一。當我們生成兩個不同的數組時，可以使用相同的鍵：
function Blog(props) {
const sidebar = (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{sidebar}
<hr />
{content}
</div>
);
}
const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById('root')
);
在CodePen上試一試
鍵作為一個提示傳給React，但不會將他們傳給你的組件。如果你的組件需要一個相同的值，用個不同的名字顯示的作為一個prop將它傳入。
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);
如上面的例子，Post組件可以讀取props.id，而不是props.key。
在JSX中嵌入map()
在上面的例子中，我們聲明了一個單獨的listItems變量，然后將其加入JSX中：
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
JSX允許在花括號中嵌入任意表達式，這就使得我們可以內聯map()的結果：
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
在CodePen上試一試
有時這可以帶來更清晰的代碼，但這種風格也可能被濫用。正如在JavaScript中，是否值得為了可讀性去提取一個變量，這取決于你。記住，如果map()的內容中嵌套太多，也許這就意味著該去提取組件了。
