溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
本文主要給大家介紹了關于React列表渲染的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。
示例詳解：
列表渲染也很簡單，利用map方法返回一個新的渲染列表即可，例如：
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
基礎列表組件的構造中，有一個重要的屬性值key需要你進行指定，這個很重要，和幫助框架進行性能優化有關，具體深入原因后續會繼續了解，先來看例子：
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')
);
需要注意的是key的指定需要是其值是唯一的，因為它能幫助框架更好的識別列的改變，添加和刪除，如果有穩定的唯一鍵值就使用唯一鍵值，如果沒有可以使用index來進行標識，但是不提倡在列表會進行頻繁排序的時候使用index，因為這樣會使得性能下降。
例如：
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);
出來以上用map構造好列表外，map的語法還可以內嵌到jsx語法中，只要加上{}即可，寫法多種多樣，可以選一種自己順眼的哦，呵呵噠。
例如以下兩種寫法是一樣滴:
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
