在版本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 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>
)
}