react中map方法如何用

本篇內容主要講解“react中map方法如何用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“react中map方法如何用”吧!

在react中，map方法用于遍歷和顯示組件的類似對象列表；map方法并不是react特有的，可以在任何數組上調用標準的JavaScript函數，map方法通過對調用數組的每個元素調用提供的函數來創建數組。

本教程操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react中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>  
          <h3>React Map例子</h3>  
              <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>  
      <h3>React Map例子</h3>  
          <ul> {listItems} </ul>  
    </div>  
  );  
}  
  
const numbers = [1, 2, 3, 4, 5];  
ReactDOM.render(  
  <NumberList numbers={numbers} />,  
  document.getElementById('app')  
);

到此，相信大家對“react中map方法如何用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！