我是靠谱客的博主 无聊蓝天,这篇文章主要介绍react中map方法怎么用,现在分享给大家,希望可以做个参考。

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react中map方法怎么用

map是一种数据集合类型,其中数据以对的形式存储。它包含一个唯一的键,存储在映射中的值必须映射到键。我们不能在map()中存储重复的对,这是因为每个存储的键都是惟一的,它主要用于快速搜索和查找数据。

在React里map方法用于遍历和显示组件的类似对象列表,map不是React特有的,相反,它是可以在任何数组上调用的标准JavaScript函数。map()方法通过对调用数组中的每个元素调用提供的函数来创建新数组。

例子

在给定的示例中,map()函数接受一个数字数组并将其值加倍,我们将map()返回的新数组分配给变量doubleValue并记录它。

复制代码
1
2
3
4
5
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue);
登录后复制

在React中,map()方法用于:

1. 遍历列表元素。

例子

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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. 用键遍历列表元素。

例子

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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例子</h2> <ul> {listItems} </ul> </div> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('app') );
登录后复制

【相关推荐:javascript视频教程、web前端】

以上就是react中map方法怎么用的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是无聊蓝天最近收集整理的关于react中map方法怎么用的全部内容,更多相关react中map方法怎么用内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(111)

评论列表共有 0 条评论

立即
投稿
返回
顶部