广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >react循环数据(列表)的实现
  • 475
分享到

react循环数据(列表)的实现

2024-04-02 19:04:59 475人浏览 薄情痞子
摘要

首先我们模拟一下后台传过来的数据,这里为了让代码清晰,数据就简单的模拟了一下 import bg3 from './image/bg3.png' constructo

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


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

--结束END--

本文标题: react循环数据(列表)的实现

本文链接: https://www.lsjlt.com/news/123453.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react循环数据(列表)的实现
    首先我们模拟一下后台传过来的数据,这里为了让代码清晰,数据就简单的模拟了一下 import bg3 from './image/bg3.png' constructo...
    99+
    2022-11-12
  • Android studio listview实现列表数据显示 数据循环显示
    Android studio listview实现列表数据显示 样式不好看!想要好看的样式可以私我,我加! item.xml ...
    99+
    2022-06-06
    Android Studio 列表 studio 数据 循环 listview Android
  • vue 使用el-table循环轮播数据列表的实现
    目录使用el-table循环轮播数据列表vue el-table简单轮播使用el-table循环轮播数据列表 因为是在内网开发,安装插件导包进去非常麻烦,有条件的可以去下载插件实现,...
    99+
    2022-11-13
  • js实现列表循环滚动
    本文实例为大家分享了js实现列表循环滚动的具体代码,供大家参考,具体内容如下 先介绍几个属性 clientHeight 元素的高度clientTop 元素顶部边框的宽度scrollT...
    99+
    2022-11-13
  • Android studio listview实现列表数据显示 数据循环显示效果
    Android studio listview实现列表数据显示 样式不好看!想要好看的样式可以私我,我加! item.xml <?xml version="...
    99+
    2022-06-06
    Android Studio 列表 studio 数据 循环 listview Android
  • vue怎么使用el-table实现循环轮播数据列表
    这篇文章主要介绍“vue怎么使用el-table实现循环轮播数据列表”,在日常操作中,相信很多人在vue怎么使用el-table实现循环轮播数据列表问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue怎么使用...
    99+
    2023-06-30
  • 数据结构之——Python实现循环队列
    栈是先入后出,与之相反的是队列,队列是先进先出的线性结构。队列是只允许在一端进行插入操作,而在另一端进行删除操作的线性表。允许插入的一端称为队尾,允许删除的一端称为队头。 图1 队列的定义 队列的存储结构中使用的最多的是循...
    99+
    2023-01-31
    数据结构 队列 Python
  • js如何实现列表循环滚动
    本篇内容主要讲解“js如何实现列表循环滚动”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“js如何实现列表循环滚动”吧!先介绍几个属性clientHeight 元素的高度clientTop 元素顶...
    99+
    2023-07-02
  • vue实现列表无缝循环滚动
    本文实例为大家分享了vue实现列表无缝循环滚动的具体代码,供大家参考,具体内容如下 功能介绍: 在PC端网页,包括大数据、官网、后台管理平台开发中,可能会用到这种列表循环滚动的展示。...
    99+
    2022-09-27
  • vue循环列表动态数据的示例分析
    这篇文章将为大家详细讲解有关vue循环列表动态数据的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。调用方法:Vue.set( target, key, value...
    99+
    2022-10-19
  • Python实现for循环倒序遍历列表
    目录for倒序遍历列表for循环(正序/倒序)1.正序2.倒序for倒序遍历列表 数字列表,range方法构建列表: for value in range(5, -1, -1):  ...
    99+
    2022-11-11
  • python列表构建器如何实现循环
    这篇文章主要介绍python列表构建器如何实现循环,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!python的数据类型有哪些python的数据类型:1. 数字类型,包括int(整型)、long(长整型)和float(...
    99+
    2023-06-14
  • python如何将循环得到的数据放入列表
    要将循环得到的数据放入列表,可以按照以下步骤进行:1. 创建一个空列表,用于存储数据。2. 在循环中,每次迭代时将数据添加到列表中。...
    99+
    2023-09-20
    python
  • python怎么将循环得到的数据放入列表
    你可以将每次循环得到的数据使用`append()`函数添加到列表中。下面是一个示例:```pythondata_list = [] ...
    99+
    2023-08-22
    python
  • Java 循环队列/环形队列的实现流程
    之前,我们使用链表实现了基础队列,链接放在这里可以去康康哟 Java栈和基础队列的实现详解 之所以没有选择数组来实现,是因为每有一个元素出队,数组中所有剩下的元素都需要向前移动一次,...
    99+
    2022-11-13
  • html+css+javascript怎么实现列表循环滚动
    这篇文章主要介绍了html+css+javascript怎么实现列表循环滚动的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇html+css+javascript怎么实现列表循环...
    99+
    2022-10-19
  • 基于vue实现循环滚动列表功能
    注意:需要给父容器一个height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width。 先来介绍该组件的用法: 1.安...
    99+
    2022-11-12
  • js实现列表自动滚动循环播放
    本文实例为大家分享了js实现列表自动滚动循环播放的具体代码,供大家参考,具体内容如下 1.实现效果图 鼠标移入,暂停滚动; 鼠标移出,继续滚动; 2.原理 要实现无缝衔接,在原有u...
    99+
    2022-11-13
  • React虚拟列表的实现
    目录1.背景 2.什么是虚拟列表 3.相关概念简介 4.虚拟列表实现 4.1 驱动开发:参数剖析4.2 组件初始化计算和布局 4.3 滚动触发注册事件与更新 4.4 item高度不等...
    99+
    2022-11-12
  • Java数据结构与算法之循环队列的实现
    目录概述循环队列循环队列实现改变队列大小enqueue 方法dequeue 方法main完整代码 概述 从今天开始, 小白我将带大家开启 Jave 数据结构 & 算法的新篇章...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作