如何在reactjs中显示多个标签？ [英] How to display multiple tags in reactjs?

问题描述

我已经添加了一个新的用户CARD，上面有一个加号。我已经制作了额外的卡片，在每张卡片上显示用户名。显示用户名的卡片使用 .map（）方法显示。现在，如果我在 .map（）函数中插入第1部分代码（见下文），则会显示多个添加新用户卡。我的最终目标是显示单个添加新用户卡并使用 .map（）显示剩余的卡片。

I have made a add new user CARD which has a plus sign on it. I have made additional cards which display username on each card. The cards which display username are displayed using .map() method. Now if I insert part 1 code (see below) inside the .map() function then it displays multiple add new user card. My final goal is to display single add new user card and use .map() to display remaining cards.

<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中插入上面的代码它显示多个添加新用户卡。

If I insert above code inside .map() it displays multiple add new user card.

我应该在哪里插入第1部分代码 displayUsers（）方法？

Where should I insert the part 1 code inside displayUsers() method ?

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>
    );
  });
}

推荐答案

您可以使用添加用户卡与地图呈现分开。

You would use the Add user card separate from map render.

在版本 16.2.0 或更高版本中，您可以通过将它们包装在 React.Fragment

In version 16.2.0 or above you can return multiple elements by wrapping them in a 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 ，你会把它们作为数组返回

Between v16.0.0 to 16.2.0, you would return them as array like

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中你只能返回一个元素。

and before v16, you would wrap them in a container div since you could only return a single element.

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>
  )
} 

这篇关于如何在reactjs中显示多个标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！