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

Question

我已经添加了一个新的用户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>
    );
  });
}

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

Answer 2

我认为render会返回displayUsers的结果。

三个答案：

• 在React＆lt; v16，你必须将它们包装在一个元素中（例如，一个包装器div）。
• 在React＆gt; = v16中，您可以按照自己的意愿返回数组，但是您需要为它们提供唯一的key。
• 在React＆gt; = v16.2中，您可以使用<React.Fragment>而不是key。{/ li>

打包机：

displayUsers(){
    return (
        <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>
    );
} 

具有唯一key s的数组：

displayUsers(){
    return this.state.userList.map(user => {
        return(
            <div key={user.???} 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>
        );
    });
} 

注意key={user.???}，显然选择要使用的user对象的唯一方面。

<React.Fragment>

displayUsers(){
    return (
        <React.Fragment>
        {this.state.userList.map(user => {
            return(
                <div key={user.???} 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>
    );
} 

Answer 3

试试这个：

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