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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Arrays sort排序[通俗易懂]

    Arrays sort排序[通俗易懂]Arrays.sort默认是升序,如果我们需要降序排列数组?Arrays.sort(distances);——升序Arrays.sort(distances,Collections.reverseOrder());——降序再说说Collections集合类,用来排序集合的Collections.sort(list)——升序Collections.reverse(list…

    2022年10月20日
    0
  • DOS 和 Linux 常用命令的对比

    DOS和Linux常用命令的对比许多在shell提示下键入的Linux命令都与你在DOS下键入的命令相似。事实上,某些命令完全相同。本附录提供了Windows的DOS提示

    2021年12月26日
    39
  • CentOS 7安装VMware Tools「建议收藏」

    CentOS 7安装VMware Tools「建议收藏」在终端中配置:[root@localhost桌面]#cd/opt///进入opt目录下[root@localhostopt]#ls//列出目录下的文件rhVMwareTools-10.0.5-3228253.tar.gz[root@localhostopt]#tar-zxvfVMwareTools-10.0.5-3228253.tar.gz…..解压过程略过[root@localhostopt]#ls//列出目录下的文件…

    2022年5月20日
    32
  • goland 2021.2.3 服务器激活(在线激活)

    goland 2021.2.3 服务器激活(在线激活),https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月14日
    365
  • vue项目封装组件_前端组件封装

    vue项目封装组件_前端组件封装前言在使用vue进行日常开发的时候,组件的封装是一个很常规的操作,也可以从npm仓库下载别人封装好的组件来使用,比如iview,elementui等…但每个项目的应用场景不同,所以我们有时也需要自己封装组件。而如果在开发中换了项目,那么就只能复制代码过去,略显麻烦,这个时候呢,可以将封装好的组件上传到npm仓库,需要使用时就可以直接通过npm指令下载,非常方便。1.环境准备因为我们封装的是Vue组件,所以直接在脚手架中封装即可。//创建项目因为我们只需封装组件所以RouterSt

    2022年9月23日
    0
  • Impala与Hive的比較

    Impala与Hive的比較

    2021年12月2日
    40

发表回复

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

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