从地图返回多个 <td> 而不将它们包装在封闭的标签中

Question

我有点被困在这种情况下。我知道要解决此类错误，我们必须将它们包装在容器或其他东西中。但在这种情况下，我不能。请让我知道是否有任何解决方案。

<div className="table-responsive col-lg-12">
  <table className="table table-bordered table-hover">
    <thead>
      <tr className="active">
        <th className="width10">Name</th>
        <th className="width10">Number</th>
        <th className="width12">Email</th>
        <th className="width10">User Handle</th>
        <th className="width12">Address</th>
        <th className="width10">Device IMEI</th>
        <th className="width10">Mapped Date</th>
      </tr>
    </thead>
    { this.state.userDetails.map((user,i)=>{
        return(
          <tbody key={i}>
            <tr>
              <td>{user.fn ? user.fn : "-"}</td>
              <td>{user.mob ? user.mob : "-"}</td>
              <td>{user.eml ? user.eml : "NA"}</td>
              <td>{user.uh ? user.uh : "-"}</td>
              <td>{user.add ? user.add : "-"}</td>
            {this.state.deviceDetails.map((dev,i)=>{
              if(user.idx == dev.uid){
                return(
                  <td>{dev.imei ? dev.imei : "-"}</td>
                  <td>{dev.dm ? dev.dm : "-"}</td>
                )
              }
            })}
            </tr>
          </tbody>
        )
      })
    }
  </table>
</div>

上面是我要渲染的表格。有两个数组，我必须从中显示我的表格内容。所以我必须为两个不同的数组执行两次映射。当我映射时，this.state.userDetails我得到了错误。如果我将其包裹在 a<div>或<tr>两者中，则内容将放置在 Device IMEI 中<th>。我该如何解决这个问题？非常感谢任何帮助.. :)

Answer 1

用 JSX 糖包装你的内容应该可以工作。你不需要展平结果数组，React 会为你做这件事。请参阅JSX 文档：

  {this.state.deviceDetails.map((dev,i)=>{
          if(user.idx == dev.uid){
            return([
              <td>{dev.imei ? dev.imei : "-"}</td>,
              <td>{dev.dm ? dev.dm : "-"}</td>
            ])
          }
        })}

请参阅React Github 页面上提出的这个问题。