react循环数据

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

   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方法循环出来

  {
    
    
        this.state.list.map((item,key) => {
    
    
            return (
              <div className="winfor" onClick={
    
    () => console.log(item.id)}>
                 <img src={
    
    item.img} className="winforimg" />
                    
                 
              </div>
            )
          })
  }