資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 React.js 中處理列表和鍵
在 React 中在 UI 上顯示列表
Map 是 JavaScript 函式，它將返回一個新陣列，用於提供陣列，如下所示 -
const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbers = originalNumbers.map( (number)=> number * number); console.log(“Squared Numbers==”squaredNumbers);
在 React 中構建列表與使用 map 函式類似。我們不會僅僅返回平方數，而是返回具有平方值列表元素。
const originalNumbers = [ 2, 4, 6, 8, 10];
const squaredNumbersList= originalNumbers.map((number) =>
<li>{number*number}</li>
);使用 ui 標籤在螢幕上呈現 -
ReactDOM.render(
<ul>{ squaredNumbersList }</ul>,
document.getElementById('root')
);當我們執行此示例時，瀏覽器控制檯中會收到一條警告，提示列表缺少鍵。React 為理解每一行都需要一個鍵，該鍵對該行是唯一的。
const squaredNumbersList= originalNumbers.map((number) =>
<li key={SomeUniqueKey}>{number*number}</li>
);鍵將用於識別哪一行已更改或已刪除或已新增。據此，React 將更新 UI。我們還將獲得迴圈的索引。
const squaredNumbersList= originalNumbers.map((number,index) =>
<li key={index}>{number*number}</li>
);但 React 不建議使用索引作為鍵，因為它對應用程式的效能有負面影響。
鍵在兄弟行中應該是唯一的，且並不需要在元件中全域性唯一。
map 函式內的元素需要鍵，而不是行中的其他巢狀子元素。
將 map 函式嵌入到 jsx 表示式中 -
function MessageList(props) {
const messages = props.messages;
return (
<ul>
{messages.map((message) =>
<ListItem key={message.rowKey}
value={message.text} />
)}
</ul>
);
}此處 ListItem 是一個自定義元件，它將每條訊息作為 value prop，且鍵是訊息物件上的 rowKey。
如果列表很大並且編寫程式碼整潔，那麼使用單獨的元件是一種好的方法。
更新時間： 28-8 月-2019
505 瀏覽量
廣告