react-循环渲染

7/19/2020 react
  • map
  • key
constructor(props){
    super(props)
    this.state = {
        list:[
            {
                name:'zhangsan',
                id:"1"
            },
            {
                name:'lisi',
                id:"2"
            },
            {
                name:'wangwu',
                id:"3"
            }
        ]
    }
}
render(){
    return <ul>
        {
            // key 必须,不能是index 和 random
            this.state.list.map((item,index) => <li key={item.id}>{item.name}-{index}</li>)
        }
    </ul>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
更新: 7/25/2022, 3:15:19 PM