正文

react循环数据(列表)的实现

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0711

这篇文章主要介绍了react循环数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

首先我们模拟一下后台传过来的数据,这里为了让代码清晰，数据就简单的模拟了一下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import bg3 from './image/bg3.png'
constructor(props){
   super(props)
   this.state = {
   ///这里
      list:[
         { id:1,img:bg3},
         { id:2,img:bg3},
         { id:3,img:bg3},
         { id:4,img:bg3},
         { id:5,img:bg3},
      ],
  ///    
   }
}

然后在使用map方法循环出来

?
1
2
3
4
5
6
7
8
9
10
11
{
      this.state.list.map((item,key) => {
          return (
            <div className="winfor" onClick={() => console.log(item.id)}>
               <img src={item.img} className="winforimg" />
                  
               
            </div>
          )
        })
}

补充：React 循环列表

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import {Person,Twoway} from './Person/Person'
 
class  App extends Component{
  state={
    persons:[{name:'小仙女',age:'18'},{name:'小玉',age:'18'},{name:'家璇',age:'18'}],
 
  }
 
  render(){
    const listItems = this.state.persons.map((item,index) =>
       <Person name={item.name} age={item.age} key={index} />
     );
      return(
        <div className="App">
             {listItems}
        </div>
      )     
  }
}
export default App;

到此这篇关于react循环数据的实现的文章就介绍到这了,更多相关react循环数据内容请搜索米米素材网以前的文章或继续浏览下面的相关文章希望大家以后多多支持米米素材网！

原文链接：https://blog.csdn.net/weixin_42821697/article/details/111172982