React教程

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;
输出
ReactMap
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;
输出
ReactMap
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4