Вернуть 2 строки при заполнении таблицы с помощью функции карты - PullRequest
Новая
       16

Вернуть 2 строки при заполнении таблицы с помощью функции карты

1 голос
/ 16 мая 2019

В моем коде есть таблица Semantic-UI-React, которую я построил следующим образом: 

<Table striped celled fixed textAlign="center">
    <Table.Body>{activeLogList}</Table.Body>
</Table>

Я заполняю эту таблицу своим списком журналов и функцией карты: 

 const activeLogList = this.state.activeLogList.map(logEntry => (
  <Table.Row key={logEntry.event}>
    <Table.Cell verticalAlign="middle">{logEntry.event}</Table.Cell>
    <Table.Cell verticalAlign="middle">{this.formatTime(logEntry.time)}</Table.Cell>
    <Table.Cell verticalAlign="middle">{logEntry.name}</Table.Cell>
    <Table.Cell verticalAlign="middle">{logEntry.model}</Table.Cell>
    <Table.Cell verticalAlign="middle">{logEntry.ip}</Table.Cell>
    <Table.Cell verticalAlign="middle">{logEntry.description}</Table.Cell>
  </Table.Row>
))

Дело в том: Так как я создаю этот activeLogList с использованием map, я могу вернуть только один элемент, и это 1 Table.Row , но в некоторых случаях мне нужно вернуть 2 Table.Row примерно так: 

const activeLogList = this.state.activeLogList.map(logEntry => (
  <Table.Row key={logEntry.event}>
    <Table.Cell verticalAlign="middle">{logEntry.event}</Table.Cell>
    <Table.Cell verticalAlign="middle">{this.formatTime(logEntry.time)}</Table.Cell>
    <Table.Cell verticalAlign="middle">{logEntry.name}</Table.Cell>
    <Table.Cell verticalAlign="middle">{logEntry.model}</Table.Cell>
    <Table.Cell verticalAlign="middle">{logEntry.ip}</Table.Cell>
    <Table.Cell verticalAlign="middle">{logEntry.description}</Table.Cell>
  </Table.Row>
  <Table.Row>
    SOMETHING GOES HERE
  </Table.Row>      
))

Код не компилируется, если я пытаюсь это сделать, так что ...

вопрос: Как разумно заполнить эту таблицу, когда иногда мне нужно вернуть две строки таблицы в функции карты вместо одной?

Ответы [ 2 ]

1 голос
/ 16 мая 2019

Если вы используете response ^ 16.x.x, вы можете использовать array of components вместо фрагмента: 

const activeLogList = this.state.activeLogList.map(logEntry => ([
  <Table.Row key={logEntry.event}>
    <Table.Cell verticalAlign="middle">{logEntry.event}</Table.Cell>
    <Table.Cell verticalAlign="middle">{this.formatTime(logEntry.time)}</Table.Cell>
    <Table.Cell verticalAlign="middle">{logEntry.name}</Table.Cell>
    <Table.Cell verticalAlign="middle">{logEntry.model}</Table.Cell>
    <Table.Cell verticalAlign="middle">{logEntry.ip}</Table.Cell>
    <Table.Cell verticalAlign="middle">{logEntry.description}</Table.Cell>
  </Table.Row>,
  <Table.Row key="custom row">
    SOMETHING GOES HERE
  </Table.Row>
]))

Примечание: не забудьте добавить ключ в каждый элемент массива, чтобы избежать предупреждений

1 голос
/ 16 мая 2019

В реакции вы можете отобразить (или вернуть) только один родительский компонент, чтобы решить эту проблему обычно, вы бы обернули все большим <div>, но вы не можете сделать это в этом случае, поэтому вы должны использовать React.Fragment, этоКомпонент не генерирует новый HTML-элемент 

const activeLogList = this.state.activeLogList.map(logEntry => (
  <React.Fragment>
    <Table.Row key={logEntry.event}>
      <Table.Cell verticalAlign="middle">{logEntry.event}</Table.Cell>
      <Table.Cell verticalAlign="middle">{this.formatTime(logEntry.time)}</Table.Cell>
      <Table.Cell verticalAlign="middle">{logEntry.name}</Table.Cell>
      <Table.Cell verticalAlign="middle">{logEntry.model}</Table.Cell>
      <Table.Cell verticalAlign="middle">{logEntry.ip}</Table.Cell>
      <Table.Cell verticalAlign="middle">{logEntry.description}</Table.Cell>
    </Table.Row>
    <Table.Row>
      SOMETHING GOES HERE
    </Table.Row>
  </React.Fragment>      
))

Существует сокращение для <React.Fragment>, <> для открытия и </> для закрытия, но пока не поддерживается всеми синтаксическими анализаторами, React.Fragment теперь безопаснее и также поддерживает атрибут key.

...