react map遍历

来源：互联网发布：黑暗之魂3优化编辑：程序博客网时间：2024/06/06 16:32

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

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

阅读全文

0 0