您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何在reactjs中显示多个标签?

如何在reactjs中显示多个标签?

您可以将“添加用户卡”与地图渲染分开使用。

在版本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>
  )
}
其他 2022/1/1 18:13:34 有733人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶