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

長安網(wǎng)站建設公司創(chuàng)新互聯(lián)公司,長安網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為長安上千提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設公司要多少錢，請找那個售后服務好的長安做網(wǎng)站的公司定做！

react中map的用法：1、使用“{this.state.ToDoList.map((item,index)=>{return

{item}

})}”語法循環(huán)顯示一個數(shù)組ToDoList；2、用數(shù)組調(diào)用“map()”方法，return返回想要得的內(nèi)容即可。

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

1、這里以一個循環(huán)顯示一個數(shù)組ToDoList的例子來展示。

import React, { Component } from 'react'
export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       ToDoList:[1,2]
    }
  }
  
  render() {
    return (
      

        提交
        

          {this.state.ToDoList.map((item,index)=>{
            return {item}
          })}
        
      
    )
  }
}

2、直接用數(shù)組調(diào)用 map() 方法，return 返回你想要得的內(nèi)容，以及綁定 key 值。

        

          {this.state.ToDoList.map((item,index)=>{
            return {item}
          })}
        

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

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

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

3.運行結果如下圖

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