react循环数据(列表)的实现
2021-04-15 04:06
1426 查看
首先我们模拟一下后台传过来的数据,这里为了让代码清晰,数据就简单的模拟了一下
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循环数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:相关文章推荐
- javaweb-react的入门遇到的问题三:ajax获取数据与循环处理放入列表
- react 修改循环列表的当前单个子项状态:思路 拿原始state数据更改,再做请求
- 【Python-3.3】使用while循环实现列表间数据移动
- Android studio listview实现列表数据显示 数据循环显示效果
- React Native ——实现一个简单的抓取github上的项目数据列表
- 一周stackoverflow热门问题选登:如何用Python for循环实现列表中数据两两循环打印?
- asp+ajax能实现根据下拉列表值动态无刷新显示数据
- 实现列表数据的过滤
- [java]增删改查后给出操作提示后跳转到数据列表的小问题解决[简单实现]
- 深入剖析ExtJS 2.2实现及应用连载(13):数据与列表的应用
- NET WinForm程序中给DataGridView表头添加下拉列表实现数据过滤【转载】
- 用js实现列表框数据对换的小例题
- 采用ListView实现数据列表显示——SimpleCursorAdapter
- dl,dt,dd标签 VS 传统table实现数据列表
- asp.net 下拉列表无级数据绑定实现代码
- 数据结构(三)——队列及实现、循环队列实现
- Android应用中使用ListView实现数据列表显示(传智播客视频笔记)
- Jsp中forEach循环List显示数据列表
- 06-php雇员管理系统-实现显示雇员信息列表分页改进(可以处理大数据100000条)
- ListView实现数据列表显示