首頁  >  文章  >  web前端  >  react中map的用法是什麼

react中map的用法是什麼

藏色散人
藏色散人原創
2022-12-28 09:52:162388瀏覽

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

  • {item}})}」語法循環顯示一個陣列ToDoList;2、用陣列呼叫「map()」方法,return傳回想要得的內容即可。
  • react中map的用法是什麼

    本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

    react中map的用法是什麼?

    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影片教學

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

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