這篇文章主要介紹了react中map怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇react中map怎么使用文章都會有所收獲，下面我們一起來看看吧。

長安網站建設公司創新互聯公司,長安網站設計制作，有大型網站制作公司豐富經驗。已為長安上千提供企業網站建設服務。企業網站搭建\成都外貿網站建設公司要多少錢，請找那個售后服務好的長安做網站的公司定做！

react中map的用法：1、使用“{this.state.ToDoList.map((item,index)=>{return <li key={index}>{item}</li>})}”語法循環顯示一個數組ToDoList；2、用數組調用“map()”方法，return返回想要得的內容即可。

React 中 map() 方法的使用，以及 key 值的綁定。

1、這里以一個循環顯示一個數組ToDoList的例子來展示。

import React, { Component } from 'react'
export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       ToDoList:[1,2]
    }
  }
  
  render() {
    return (
      <div>
        <input></input><button>提交</button>
        <ul>
          {this.state.ToDoList.map((item,index)=>{
            return <li key={index}>{item}</li>
          })}
        </ul>
      </div>
    )
  }
}

2、直接用數組調用 map() 方法，return 返回你想要得的內容，以及綁定 key 值。

        <ul>
          {this.state.ToDoList.map((item,index)=>{
            return <li key={index}>{item}</li>
          })}
        </ul>

2.1 這里為了方便所以綁定的key值是數組的下標，實際使用中不建議這么做，因為React中Diff算法進行組件對比時，調用的key是數組下標的話，數組的改變，會導致下標對應的數組內容不正確，比如

[1,2,3] ，將1刪除之后變成 [2,3],

原來下標0對應的1, 下標1對應2，下標2對應3，改變之后下標0對應的2，下標1對應的3.顯然這會對Diff算法進行兩個虛擬DOM對比時造成困擾，因為id相同的情況下對應的內容卻不一樣了，失去了id的意義。因此不建議使用數組下標作為key值。

3.運行結果如下圖

關于“react中map怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“react中map怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道。

網站題目：react中map怎么使用
網址分享：http://m.newbst.com/article2/gdioic.html

成都網站建設公司_創新互聯，為您提供網站策劃、定制網站、動態網站、企業網站制作、服務器托管、網站營銷

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯