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 hooks入门详细教程

    react hooks入门详细教程

    这篇文章主要介绍了react hooks入门详细教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • 浅析react里面如何封装一个通用的Ellipsis组件

    浅析react里面如何封装一个通用的Ellipsis组件

    这篇文章主要为大家详细介绍了在react里面如何封装一个通用的Ellipsis组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-12-12
  • React获取Java后台文件流并下载Excel文件流程解析

    React获取Java后台文件流并下载Excel文件流程解析

    这篇文章主要介绍了React获取Java后台文件流下载Excel文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 自己动手封装一个React Native多级联动

    自己动手封装一个React Native多级联动

    这篇文章主要介绍了自己动手封装一个React Native多级联动,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React useMemo与useCallabck有什么区别

    React useMemo与useCallabck有什么区别

    useCallback和useMemo是一样的东西,只是入参有所不同,useCallback缓存的是回调函数,如果依赖项没有更新,就会使用缓存的回调函数;useMemo缓存的是回调函数的return,如果依赖项没有更新,就会使用缓存的return
    2022-12-12
  • 利用React实现一个有点意思的电梯小程序

    利用React实现一个有点意思的电梯小程序

    这篇文章主要为大家详解介绍了如何利用React实现一个有点意思的电梯小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下
    2022-08-08
  • ReactJS中的自定义组件实例代码

    ReactJS中的自定义组件实例代码

    React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了ReactJS中的自定义组件的代码讲解,需要的朋友可以参考下
    2019-11-11
  • 解决React初始化加载组件会渲染两次的问题

    解决React初始化加载组件会渲染两次的问题

    这篇文章主要介绍了解决React初始化加载组件会渲染两次的问题,文中有出现这种现象的原因及解决方法,感兴趣的同学跟着小编一起来看看吧
    2023-08-08
  • React组件封装中三大核心属性详细介绍

    React组件封装中三大核心属性详细介绍

    这篇文章主要为大家介绍了React组件实例三大属性state props refs使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Docker部署SpringBoot项目到云服务器的实现步骤

    Docker部署SpringBoot项目到云服务器的实现步骤

    Docker作为一种轻量级的容器化技术,为开发者提供了快速、便捷的部署方案,本文主要介绍了Docker部署SpringBoot项目到云服务器,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01

最新评论