react中map怎么使用

這篇文章主要介紹了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 <li key={index}>{item}</li>})}”語法循環(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 (
      <div>
        <input></input><button>提交</button>
        <ul>
          {this.state.ToDoList.map((item,index)=>{
            return <li key={index}>{item}</li>
          })}
        </ul>
      </div>
    )
  }
}

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

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

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è)資訊頻道。

網(wǎng)站題目：react中map怎么使用
網(wǎng)址分享：http://muchs.cn/article2/gdioic.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、定制網(wǎng)站、動態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、服務器托管、網(wǎng)站營銷

廣告

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