react循环数据(列表)的实现
更新时间:2021年04月13日 10:31:50 作者:范范t
这篇文章主要介绍了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> ) }) }
补充: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循环数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
React通过redux-persist持久化数据存储的方法示例
这篇文章主要介绍了React通过redux-persist持久化数据存储的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-02-02React Native:react-native-code-push报错的解决
这篇文章主要介绍了React Native:react-native-code-push报错的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10React库之react-beautiful-dnd介绍及其使用过程
在使用React构建Web应用程序时,拖拽功能是一项常见需求,为了方便实现拖拽功能,我们可以借助第三方库react-beautiful-dnd,本文将介绍react-beautiful-dnd的基本概念,并结合实际的项目代码一步步详细介绍其使用过程,需要的朋友可以参考下2023-11-11详解react-native WebView 返回处理(非回调方法可解决)
这篇文章主要介绍了详解react-native WebView 返回处理(非回调方法可解决),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-02-02
最新评论