Skip to main content

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

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

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 值必須不同,但在不同迴圈中可以重複#

/**
* 第一個陣列和第二個陣列的 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>
);
}
Last updated on