在 react 或 preact 中渲染 .map() 中的两个表行

Question

我想为地图内的每个数据显示两行，例如我有一个名为 productResponse 的数据对象，然后我想像这样渲染 sn-p

<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，我该怎么办？

Answer 1

你说你得到的错误是：

它说表达式必须有一个父元素，它可以与一个 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>