我制作了一张添加新用户卡,上面有一个加号。我制作了额外的卡片,在每张卡片上显示用户名。显示用户名的卡片是使用 .map()
方法显示的。现在,如果我在 .map()
函数中插入第 1 部分代码(见下文),则会显示多个添加新用户卡。我的最终目标是显示单个添加新用户卡并使用 .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()
中插入上述代码,它会显示多个添加新用户卡。
我应该在 displayUsers()
方法中的什么位置插入第 1 部分代码?
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>
);
});
}
最佳答案
您可以将添加用户卡与 map 渲染分开使用。
在 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>
)
}
在v16.0.0到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>
)
}
关于javascript - 如何在reactjs中显示多个标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50153566/