我添加了一个带有加号的新用户CARD。我制作了其他卡,在每张卡上显示用户名。显示用户名的卡使用.map()方法显示。现在,如果我在.map()函数内插入第1部分代码(请参见下文),那么它将显示多个添加新用户卡。我的最终目标是显示单个添加新的用户卡并用于.map()显示剩余的卡。
.map()
<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()
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
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,您将以数组形式返回它们
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> ) }