react的map遍历_javamap遍历方式

react的map遍历_javamap遍历方式记录一下项目制作过程中学到的一些方法,以便温习render(){return(<ulclassName={style.decoratewrapper}>{this.state.decoratedata.map((item,i)=>(<likey={i}>

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

记录一下项目制作过程中学到的一些方法,以便温习

render(){
        return (
            <ul className={style.decoratewrapper}>
                {
                    this.state.decoratedata.map((item,i) => (
                        <li key={i}>
                            <div className={style.img}><img src={require("./images/"+item.src+".jpg")} /></div>
                            <List>
                                <Item extra={ <Button className={style.used} type={item.type} size="small" inline>使用中</Button> }>{item.name}</Item>
                            </List>
                        </li>
                    ))
                }
            </ul>
        );
    }

上面的map写在return里面, 当加上点击事件时会出问题,需将map遍历写在return外面,如下:

    clickButton (ind, usestate) {
        console.log(ind, usestate);
    };

    render(){
        let _this = this;
        let list = this.state.themedata.map((item,i) => (
            <li key={i}>
                <div className={style.img}><img src={require("./images/"+item.src+".jpg")} /></div>
                <List>
                    <Item extra={ <Button className={style.used} type={item.isUsing?"primary":"ghost"} size="small" inline onClick={ _this.clickButton.bind(this, i, item.isUsing) }>{item.isUsing ? "使用中" : "使用"}</Button> }>{item.name}</Item>
                </List>
            </li>
        ));
        return (
            <ul className={style.themewrapper}>
                {list}
            </ul>
        );
    }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/193023.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 光纤交换机配置zone[通俗易懂]

    光纤交换机配置zone[通俗易懂]B系列SAN交换机-Zoning配置信息型本文档提供了BrocadeSAN交换机zoning配置的分步骤指南。详细信息新建zone配置:a. 新建一个zoning配置,用cfgcreate命令。格式:cfgcreate“cfgname”,“zonename1;zonename2;…”举例:cfgcreate“cfg1”,“zone1;zone2”b. 新建一个zone,用zonecreate命令。格式:zonecreate“zone

    2022年5月22日
    34
  • 深度图转换成点云[通俗易懂]

    深度图转换成点云[通俗易懂]一、概述最近由于课题需要数据源,但是没有直接获取的方法,所以只能在周老师http://www.qianyi.info/的网站上自己下载深度图转换成点云数据,大概花了三点的时间,终于弄得差不多了,这里做个记录。二、数据准备和环境配置1、数据下载在http://redwood-data.org/indoor/dataset.html上下载CleanDepthSequence和Groun…

    2022年5月30日
    43
  • STM32之HAL库的串口接收丢字节_stm32标准库还有更新吗

    STM32之HAL库的串口接收丢字节_stm32标准库还有更新吗1STM32的三种开发方式通常新手在入门STM32的时候,首先都要先选择一种要用的开发方式,不同的开发方式会导致你编程的架构是完全不一样的。一般大多数都会选用标准库和HAL库,而极少部分人会通过直接配置寄存器进行开发。网上关于标准库、HAL库的描述相信是数不胜数。可是一个对于很多刚入门的朋友还是没法很直观的去真正了解这些不同开发发方式彼此之间的区别,所以笔者想以一种非常直白的方式,用自己的理解…

    2022年9月3日
    3
  • Java集合中对象排序

    Java集合中对象排序

    2022年1月26日
    38
  • SQL server分页的四种方法(算很全面了)

    SQL server分页的四种方法(算很全面了)  这篇博客讲的是SQLserver的分页方法,用的SQLserver2012版本。下面都用pageIndex表示页数,pageSize表示一页包含的记录。并且下面涉及到具体例子的,设定查询第2页,每页含10条记录。  首先说一下SQLserver的分页与MySQL的分页的不同,mysql的分页直接是用limit(pageIndex-1),pageSize就可以完成,但是SQLse…

    2022年6月14日
    33
  • 如何将pdf转换成word的3种免费方法「建议收藏」

    如何将pdf转换成word的3种免费方法「建议收藏」怎样将PDF转成Word?这是很多网友经常问到的问题,PDF转换成Word利用一些小技巧和工具,你会发现是很容易的,以下的PDF转Word的3种免费方法你一定要看一看。1、“复制/粘贴”大法在寻找如何将PDF转换成Word的“高级”办法之前,不妨先试一下最傻瓜的方法:首先用极速PDF阅读器打开PDF文档,选择文本内容后右击选择“复制选择内容”或直接使用“全选”;接着新建一个Word文档后,直接将内容在Word中粘贴即可。如果文档格式不复杂,这样得到的Word就够用了,当然有些可能排版会比较乱。2、G

    2022年6月1日
    58

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号