如何用React实现循环展示长尾词列表的动态效果？

本文共计299个文字，预计阅读时间需要2分钟。

首先，我们模拟一下后台传递过来的数据，为了使代码清晰，数据简化处理。以下是代码修改后的内容：

javascriptimport bg3 from './image/bg3.png';

constructor(props) { super(props); this.state={ // 这里模拟数据 list: [ { id: 1, img: bg3 }, { id: 2, img: 'image2.png' } ] };}

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

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循环数据内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！