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

赞 (0)

相关推荐

  • 详解React-Router中Url参数改变页面不刷新的解决办法

    问题 今天在写页面的时候发现一个问题,就是在React Router中使用了Url传参的功能,像这样: export class MainRouter extends React.Component { render() { return ( <BrowserRouter> <Switch> ... <Route exact path={'/channel/:channelId'} component={ChannelPerPage}/> ... </Switch

  • VSCode配置react开发环境的步骤

    vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想. 通过搭配使用 ESLint和 Prettier插件可以实现在 vscode 中完美支持 JSX 语法. 编辑器安装插件 在 vscode 中需要安装下面插件: ESLint Prettier 项目中的配置 配置ESLint 基础配置 项目中安装 babel-eslint ,

  • react 父组件与子组件之间的值传递的方法

    概念上,组件是封闭的环境.React中是单向数据流的设计,也就是是说只有父组件传递资料给子组件这回事.以正确的技术说明,拥有者组件可以设置被拥有者组件中的数据. 那么子组件要如何与父组件沟通这件事,简单的来说,是一种迂回的作法,在父组件中设置了一个方法(函数),然后传递给子组件的props,子组件在事件触发时,直接呼叫这个props所设置的方法(函数).但这中间,有谁(对象)呼叫了函数的设置,也就是this的作用. 父组件到子组件用props设置,子组件到父组件用上面说的方式,这是基本的套路,但

  • 详解React中传入组件的props改变时更新组件的几种实现方法

    我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件,常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中(这种state被成为派生状态(Derived State)),从而实现重新渲染.React 16.3中还引入了一个新的钩子函数getDerivedStateFromProps来专门实现这一需求.但无论是用componentWillReceiveProps还是getDerivedStateFromProps都不是

  • React Native实现简单的登录功能(推荐)

    React Native实现简单的登录功能(推荐)

    React Native 简介: React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等. React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验.React Native 把重点放在所有开发人员关心的平台的开发效率上

  • 使用react-router4.0实现重定向和404功能的方法

    在开发中,重定向和404这种需求非常常见,使用React-router4.0可以使用Redirect进行重定向 最常用的就是用户登录之后自动跳转主页. import React, { Component } from 'react'; import axios from 'axios'; import { Redirect } from 'react-router-dom'; class Login extends Component{ constructor(){ super(); this.

  • react-native 封装选择弹出框示例(试用ios&android)

    react-native 封装选择弹出框示例(试用ios&android)

    在开发 App 的时候,经常会使用到对话框(又叫消息框.提示框.告警框). 在web开发中经常会用得到.今天就来介绍了一下react-native 封装弹出框 之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用.先上动态效果图~ 一.封装要点 1.使用动画实现弹框布局及显示隐藏效果 2.通过一个boolean值控制组件的显示隐藏 3.弹框选项数组通过

  • 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方法循环出来 { thi

  • vue 使用el-table循环轮播数据列表的实现

    vue 使用el-table循环轮播数据列表的实现

    目录 使用el-table循环轮播数据列表 vue el-table简单轮播 使用el-table循环轮播数据列表 因为是在内网开发,安装插件导包进去非常麻烦,有条件的可以去下载插件实现,咱这里贴一下手撸的代码. 需要实现的效果大抵如下:(手机拍的,有些糊) 大部分实现的是监听是否到了div的底部,如果到了底部,就直接跳到顶部,这种体验感不是特别好,没有达到轮播的真正效果. 表格数据,devData我绑定了个空数组,因为实在是懒得敲了,按道理排名也应该是从api获取,而不是拿index. <te

  • React 全自动数据表格组件——BodeGrid的实现思路

    React 全自动数据表格组件——BodeGrid的实现思路

    表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑.查询.排序.分页.自定义显示以及一些操作按钮.我们逐一深入进行探讨以及介绍我的设计思路: 表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑.查询.排序.分页.自定义显示以及一些操作按钮.我们逐一深入进行探讨以及介绍我的设计思路: 新增和编辑 想想我们最开始写新增编辑页面是怎么做的,是不是一个页面一个页面的写,然后要么表单提交要么Ajax提交.后台有无数个新增和编辑的视图页,现在想想真是恐怖啊,看着都

  • Python for循环生成列表的实例

    一般Python for语句前不加语句,但我在机器学习实战中看到了这两条语句: featList = [example[i] for example in dataSet] classList = [example[-1] for example in dataSet] 多方研究和询问,得到如下解释: 语句featList = [example[i] for example in dataSet]作用为: 将dataSet中的数据按行依次放入example中,然后取得example中的examp

  • 微信小程序开发（一）：服务器获取数据列表渲染操作示例

    本文实例讲述了微信小程序服务器获取数据列表渲染操作.分享给大家供大家参考,具体如下: 在实际项目开发中,有很多时候,前台页面的数据需要后台服务器传递过来.而前台需要循环铺值,类似如下页面: 请求后台数据: wx.request({ url: getApp().globalData.httpUrl + '/sys/group/selectGroupProList', //请求后台地址 data: { //请求后台的分页数据 pageNum: that.data.page, pageSize: th

  • vue实现循环滚动列表

    本文实例为大家分享了vue实现循环滚动列表的具体代码,供大家参考,具体内容如下 1.安装 vue-seamless-scroll   实例文档链接 cnpm install vue-seamless-scroll --save 2.文件中引入,组件配置 import vueSeamlessScroll from 'vue-seamless-scroll' 3.使用 <template> <vue-seamless-scroll :data="CardPartsStatistic

  • 利用React实现虚拟列表的示例代码

    利用React实现虚拟列表的示例代码

    目录 列表项高度固定 代码实现 列表项高度动态 代码实现 思路说明 一些需要注意的问题 结尾 大家好,我是前端西瓜哥.这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件. 虚拟列表,其实就是将一个原本需要全部列表项的渲染的长列表,改为只渲染可视区域内的列表项,但滚动效果还是要和渲染所有列表项的长列表一样. 虚拟列表解决的长列表渲染大量节点导致的性能问题: 一次性渲染大量节点,会占用大量 GPU 资源,导致卡顿: 即使渲染好了,大量的节点也持续占用内存.列表项下的节点越多,

  • React 中的列表渲染要加 key的原因分析

    React 中的列表渲染要加 key的原因分析

    目录 为什么需要 key? 列表渲染不提供 key 会怎样? 列表渲染的 key 用数组索引会怎样? 应该用什么值作为 key? 结尾 在 React 中我们经常需要渲染列表,比如展示好友列表. 常用写法是用 Arrary.prototype.map 方法,将数组形式的数据映射为 JSX.Element 数组,并嵌入到组件要返回的 JSX.Element 中,如下: function FriendList() { const [items, setItems] = useState(['我们',

  • react 实现表格列表拖拽排序的示例

    目录 问题描述 思路 解析 1. react-sortable-hoc 2. array-move 问题描述 在项目开发中,遇到这样一个需求:需要对表格里面的数据进行拖拽排序. 效果图如下所示: 思路 安装两个插件: react-sortable-hoc (或者 react-beautiful-dnd) array-move npm install --save react-sortable-hoc npm install --save array-move 解析 1. react-sortab

  • jquery+json实现数据列表分页示例代码

    该实例中,新闻数据列表未使用表格显示.下面将所有源码附上,其中用到jquery插件. 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c:

随机推荐