用react怎样实现循环数据和循环列表？
发布时间：2022-03-02 13:04:21 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享的是react实现循环数据和循环列表的代码。小编觉得挺实用的，因此分享给大家做个参考，感兴趣的朋友接一起跟随小编看看吧。 首先我们模拟一下后台传过来的数据,这里为了让代码清晰，数据就简单的模拟了一下 import bg3 from ./image/bg3.p
|
这篇文章给大家分享的是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; （编辑：衡水站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
