这篇文章主要介绍了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值。