react map遍历

最新推荐文章于 2024-09-14 08:46:09 发布

yansherry

最新推荐文章于 2024-09-14 08:46:09 发布

阅读量3.3w

点赞数 1

分类专栏：前端笔记文章标签： react map

本文链接：https://blog.csdn.net/sherry_0706/article/details/78249001

版权

笔记同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

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

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>
        );
    }