Question

我希望在地图中为每个数据显示两行，例如，我有一个名为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，我该怎么办？

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>

在React或Preact中渲染.map（）内的两个表行

1 个答案: