React Map

2025 年 1 月 12 日 | 2 分钟阅读

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

在 React 中，map 方法用于遍历和显示组件的类似对象列表。 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;

输出

下一个主题React 表格

← 上一个下一个 →

React Map

示例

在 React 中，map() 方法用于

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React Map

示例

在 React 中，map() 方法用于

相关帖子

React 键

React 安装

React Refs

React 事件

组件生命周期

React 教程 | 学习 ReactJS，适合初学者

React Bootstrap

React vs Vue

React 状态

React JSX

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器