数据结构
网络
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 浏览量
广告