Визуализируйте две строки таблицы внутри .map () в реакции или преакте - PullRequest
Новая
       15

Визуализируйте две строки таблицы внутри .map () в реакции или преакте

0 голосов
/ 18 апреля 2019

Я хочу отобразить две строки для каждой информации внутри карты, например, у меня есть объект данных с именем 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, что мне делать?

1 Ответ

1 голос
/ 18 апреля 2019

Вы сказали, что вы получаете ошибку:

он говорит, что выражение должно иметь один родительский элемент, оно работает с одним tr, но нет с двумя tr

Часто в таком случае решение заключается в использовании фрагмента : 

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

с более новыми версиями React, вы можете использовать более короткую форму <>...</>: 

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

Но иногда вы можете реструктурировать вещи, так что вам не нужно это делать, исходя из общего контекста.

Если вы не можете использовать фрагменты, вы обычно можете поместить элемент-оболочку (div, span) вокруг элементов. В этом случае, tbody: 

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