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

小编典典

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

reactjs

我添加了一个带有加号的新用户CARD。我制作了其他卡，在每张卡上显示用户名。显示用户名的卡使用.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>
    );
  });
}

阅读 516

2020-07-22

共1个答案

小编典典

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

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

2020-07-22