我制作了一张添加新用户卡,上面有一个加号。我制作了额外的卡片,在每张卡片上显示用户名。显示用户名的卡片使用以下方式显示.map()
方法。现在,如果我将第 1 部分代码(见下文)插入到.map()
功能后会显示多个添加新用户卡。我的最终目标是显示单个添加新用户卡并使用.map()
显示剩余卡牌。
第 1 部分代码:
<div className="item-card add" onClick = {this.addUser} >
<img src={require("../../images/plus.svg")} className="plus-icon"/>
<div className="lbl">Add a new User</div>
</div>
如果我在里面插入上面的代码.map()
它显示多个添加新用户卡。
我应该在哪里插入第 1 部分代码displayUsers()
方法 ?
displayUsers() {
return this.state.userList.map(user => {
return (
<div className="item-card">
<div className="info">
<div className="username">Username: {user.userName}</div>
</div>
<div className="del-wrap">
<img src={require('../../images/cancel.svg')} />
</div>
</div>
);
});
}
您可以将添加用户卡与地图渲染分开使用。
版本中16.2.0
或以上,您可以通过将多个元素包装在React.Fragment
displayUsers(){
return (
<React.Fragment>
<div className="item-card add" onClick = {this.addUser} >
<img src={require("../../images/plus.svg")} className="plus-icon"/>
<div className="lbl">Add a new User</div>
</div>
{this.state.userList.map( user => {
return(
<div className="item-card">
<div className="info">
<div className="username">Username: {user.userName}</div>
</div>
<div className="del-wrap">
<img src={require("../../images/cancel.svg")}/>
</div>
</div>
);
})}
</React.Fragment>
)
}
Between v16.0.0 to 16.2.0
,你会将它们作为数组返回,例如
displayUsers(){
return ([
<div className="item-card add" onClick = {this.addUser} >
<img src={require("../../images/plus.svg")} className="plus-icon"/>
<div className="lbl">Add a new User</div>
</div>,
{this.state.userList.map( user => {
return(
<div className="item-card">
<div className="info">
<div className="username">Username: {user.userName}</div>
</div>
<div className="del-wrap">
<img src={require("../../images/cancel.svg")}/>
</div>
</div>
);
})}
]
)
}
在 v16 之前,您会将它们包装在容器 div 中,因为您只能返回单个元素。
displayUsers(){
return (
<div>
<div className="item-card add" onClick = {this.addUser} >
<img src={require("../../images/plus.svg")} className="plus-icon"/>
<div className="lbl">Add a new User</div>
</div>
{this.state.userList.map( user => {
return(
<div className="item-card">
<div className="info">
<div className="username">Username: {user.userName}</div>
</div>
<div className="del-wrap">
<img src={require("../../images/cancel.svg")}/>
</div>
</div>
);
})}
</div>
)
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)