React Map
Map是一种数据收集类型,其中数据以成对形式存储。它包含一个唯一的密钥。映射中存储的值必须映射到键。我们不能在map()中存储重复的对。这是因为每个存储密钥的唯一性。它主要用于快速搜索和查找数据。
在React中,?map?用于遍历和显示组件相似对象列表的方法。映射不是React的功能。而是可以在任何数组上调用的标准JavaScript函数。 map()方法通过在调用数组中的每个元素上调用提供的函数来创建新数组。
示例
在给定的示例中,map( )函数采用数字数组并将其值加倍。我们将map()返回的新数组分配给变量doubleValue并将其记录。
var numbers = [1, 2, 3, 4, 5];
const doubleValue = numbers.map((number)=>{
return (number * 2);
});
console.log(doubleValue);
在React中,map()方法用于:
1、遍历列表元素。
示例
import React from 'react';
import ReactDOM from 'react-dom';
function NameList(props) {
const myLists = props.myLists;
const listItems = myLists.map((myList) =>
<li>{myList}</li>
);
return (
<div>
<h2>React Map Example</h2>
<ul>{listItems}</ul>
</div>
);
}
const myLists = ['A', 'B', 'C', 'D', 'D'];
ReactDOM.render(
<NameList myLists={myLists} />,
document.getElementById('app')
);
export default App;
输出
2、用键遍历列表元素。
示例
import React from 'react';
import ReactDOM from 'react-dom';
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
);
return (
<div>
<h2>React Map Example</h2>
<ul> {listItems} </ul>
</div>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('app')
);
export default App;
输出