React map函数用法介绍 – ReactJS实战教程 reactmap|React

上一章ReactJS实战教程请查看：React集成Bootstrap框架
map是一种数据集合类型，其中数据以对的形式存储。它包含一个唯一的键，存储在映射中的值必须映射到键。我们不能在map()中存储重复的对，这是因为每个存储的键都是惟一的，它主要用于快速搜索和查找数据。
在React里map方法用于遍历和显示组件的类似对象列表，map不是React特有的，相反，它是可以在任何数组上调用的标准JavaScript函数。map()方法通过对调用数组中的每个元素调用提供的函数来创建新数组。
例子
在给定的示例中，map()函数接受一个数字数组并将其值加倍，我们将map()返回的新数组分配给变量doubleValue并记录它。

var numbers = [1, 2, 3, 4, 5]; const doubleValue = http://www.srcmini.com/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例子< /h2> < ul>{listItems}< /ul> < /div> ); } const myLists = ['A', 'B', 'C', 'D', 'D']; ReactDOM.render( < NameList myLists={myLists} />, document.getElementById('app') ); export default App;

2. 用键遍历列表元素。
【React map函数用法介绍 – ReactJS实战教程】例子

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=http://www.srcmini.com/{number} /> ); return ( < div> < h2>React Map例子< /h2> < ul> {listItems} < /ul> < /div> ); }const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( < NumberList numbers={numbers} />, document.getElementById('app') ); export default App;