在反应或预制中的.map（）内渲染两个表行

Posted 2021-04-04

我想为地图中的每个数据显示两行，例如我有一个名为productResponse的数据对象然后我想像这个片段一样呈现

<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover">
  <tbody>
      <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Product Group</th>
        <th class="text-center">Taxable</th>
        <th class="text-center">Tax Included</th>
        <th></th>
      </tr>
      <tr>
        <td>Sonair</td>
        <td>Customer-focused hybrid orchestration</td>
        <td>gtr</td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr>
        <td colspan="6">append here</td>
      </tr>
      <tr>
        <td>Biodex</td>
        <td>Open-source attitude-oriented strategy</td>
        <td>Sepatu Bola</td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr>
        <td colspan="6">append here</td>
      </tr>
  </tbody>
</table>

这是我的迭代数据的代码

let header =
    <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Product Group</th>
        <th class="text-center">Taxable</th>        
        <th class="text-center">Tax Included</th>
        <th></th>
    </tr>
    let body =[];
    productResponse.map((d,i)=>(

        body.push(<tr>
            <td>{d.name}</td>
            <td>{d.description}</td>
            <td>{d.product_group.name}</td>
            <td class="text-center">{d.is_taxable?<i class="fa fa-check text-info"></i>:<i class="fa fa-times text-danger"></i>}</td>
            <td class="text-center">{d.is_tax_included?<i class="fa fa-check text-info"></i>:<i class="fa fa-times text-danger"></i>}</td>
            <td>
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#exampleModal" onClick={this.edit.bind(this,d)}><i class="fa fa-pencil"></i></button>
                <button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#exampleModal" onClick={this.deleteData.bind(this,d)}><i class="fa fa-trash"></i></button>
            </div>
            </td>

        </tr>);
        body.push(<tr><td colspan="6">append here</td><tr>);
    ))
    return [header,body];

但似乎我们不能有两个tr，我该怎么办？

答案

你说过你得到的错误是：

它表示表达式必须有一个父元素，它可以使用一个tr，但不能使用两个tr

通常在这种情况下，解决方案是使用fragment：

<React.Fragment>
    <tr>...</tr>
    <tr>...</tr>
</React.Fragment>

使用更新版本的React，您可以使用更短的形式<>...</>：

<>
    <tr>...</tr>
    <tr>...</tr>
</>

但有时候，您可以根据整体情况重组事物，这样您就不需要这样做了。

如果你不能使用片段，你通常可以在元素周围放置一个包装元素（div，span）。在这种情况下，一个tbody：

<tbody>
    <tr>...</tr>
    <tr>...</tr>
</tbody>