目錄
react中map方法怎麼用
首頁 web前端 前端問答 react中map方法怎麼用

react中map方法怎麼用

Jun 28, 2022 pm 04:21 PM
react

在react中,map方法用於遍歷和顯示元件的類似物件列表;map方法並不是react特有的,可以在任何陣列上呼叫標準的JavaScript函數,map方法透過對呼叫陣列的每個元素呼叫提供的函數來建立數組。

react中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>  
          <h2>React Map例子</h2>  
              <ul>{listItems}</ul>  
    </div>  
  );  
}  
const myLists = [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;, &#39;D&#39;];   
ReactDOM.render(  
  <NameList myLists={myLists} />,  
  document.getElementById(&#39;app&#39;)  
);  
export default App;
登入後複製

2. 用鍵遍歷清單元素。

範例

import React from &#39;react&#39;;   
import ReactDOM from &#39;react-dom&#39;;   
  
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(&#39;app&#39;)  
);
登入後複製

【相關推薦:javascript影片教學web前端

以上是react中map方法怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何利用React和WebSocket建立即時聊天應用 如何利用React和WebSocket建立即時聊天應用 Sep 26, 2023 pm 07:46 PM

如何利用React和WebSocket建立即時聊天應用

React前後端分離指南:如何實作前後端的解耦與獨立部署 React前後端分離指南:如何實作前後端的解耦與獨立部署 Sep 28, 2023 am 10:48 AM

React前後端分離指南:如何實作前後端的解耦與獨立部署

如何利用React和Flask建構簡單易用的網路應用 如何利用React和Flask建構簡單易用的網路應用 Sep 27, 2023 am 11:09 AM

如何利用React和Flask建構簡單易用的網路應用

如何利用React和RabbitMQ建立可靠的訊息應用 如何利用React和RabbitMQ建立可靠的訊息應用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ建立可靠的訊息應用

如何利用React和Google BigQuery建立快速的資料分析應用 如何利用React和Google BigQuery建立快速的資料分析應用 Sep 26, 2023 pm 06:12 PM

如何利用React和Google BigQuery建立快速的資料分析應用

React程式碼偵錯指南:如何快速定位與解決前端bug React程式碼偵錯指南:如何快速定位與解決前端bug Sep 26, 2023 pm 02:25 PM

React程式碼偵錯指南:如何快速定位與解決前端bug

React Router使用指南:如何實現前端路由控制 React Router使用指南:如何實現前端路由控制 Sep 29, 2023 pm 05:45 PM

React Router使用指南:如何實現前端路由控制

React響應式設計指南:如何實現自適應的前端佈局效果 React響應式設計指南:如何實現自適應的前端佈局效果 Sep 26, 2023 am 11:34 AM

React響應式設計指南:如何實現自適應的前端佈局效果

See all articles