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=https://www.jb51.net/{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轮回数据内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！

您大概感乐趣的文章: