Reactjs 使用map函数填充表时返回2行

我的代码中有一个语义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>
  <Table.Row>
    SOMETHING GOES HERE
  </Table.Row>      
))

{activeLogList}

我用我的日志列表和映射函数填充此表：

 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>
))

const-activeLogList=this.state.activeLogList.map（logEntry=>(
{logEntry.event}
{this.formatTime（logEntry.time）}
{logEntry.name}
{logEntry.model}
{logEntry.ip}
{logEntry.description}
))

问题是：由于我使用map构建这个activeLogList，我只能返回一个元素，即1 Table.Row，但在某些情况下，我需要返回2 Table.Row，如下所示：

<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>
  <Table.Row>
    SOMETHING GOES HERE
  </Table.Row>      
))

const-activeLogList=this.state.activeLogList.map（logEntry=>(
{logEntry.event}
{this.formatTime（logEntry.time）}
{logEntry.name}
{logEntry.model}
{logEntry.ip}
{logEntry.description}
这里有些东西
))

如果我尝试这样做，代码将无法编译，因此

问题是：当有时需要在map函数中返回两行而不是一行时，填充此表的合理方式是什么？

在react中，您只能渲染（或返回）一个父组件，为了解决这个问题，您通常会用一个大的

来包装所有内容，但是在这种情况下您不能这样做，所以您应该使用

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>      
))

const-activeLogList=this.state.activeLogList.map（logEntry=>(
{logEntry.event}
{this.formatTime（logEntry.time）}
{logEntry.name}
{logEntry.model}
{logEntry.ip}
{logEntry.description}
这里有些东西
))

---

有一个缩写，即

表示打开，

表示关闭，但并非所有解析器都支持，

React.Fragment

现在更安全，还支持

键

属性。

如果使用React^16.x.x，则可以使用

组件数组而不是片段：

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>
]))

const-activeLogList=this.state.activeLogList.map（logEntry=>([
{logEntry.event}
{this.formatTime（logEntry.time）}
{logEntry.name}
{logEntry.model}
{logEntry.ip}
{logEntry.description}
,
这里有些东西
]))

注意：记住在每个数组元素上添加一个键以避免警告，这正是我所需要的！非常感谢你！