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 原生实现头像滚动播放的示例
• react 不用插件实现数字滚动的效果示例
• react实现无限循环滚动信息

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！