PJCHENder 未整理筆記

[ReactDoc] 列表與鍵(Lists and Keys)

2018-09-10

[ReactDoc] 列表與鍵(Lists and Keys)

@(React)[react docs, React]

鍵(key)應該是要設定在疊代陣列的函式中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function ListItem(props) {
// 這裡不是疊代陣列的地方,因此不需要設定 key
return <li>{props.value}</li>;
}

function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map(number => (

// 這裡是疊代陣列的位置,因此應該要設定 key
<ListItem key={number.toString()} value={number} />
));
return <ul>{listItems}</ul>;
}

在同一個疊代迴圈中的 key 值必須不同,但在不同迴圈中可以重複

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
* 第一個陣列和第二個陣列的 key 值可以重複
**/
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>
);
}
Tags: React

掃描二維條碼,分享此文章