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

编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了react循环数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

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

   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>
            )
          })
  }

补充:React 循环列表

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循环数据内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板