单击带有映射数据的行时，在表格行下方创建一个 div答案

【问题标题】：Create a div beneath a table row when clicking that row with mapped data单击带有映射数据的行时，在表格行下方创建一个 div
【发布时间】：2016-04-18 21:42:50
【问题描述】：

我有一个由数组映射的行填充的表。当我单击该行中的按钮时，我希望获得数据的扩展视图（或 div）。我遇到了一个问题，我不能在同一个 .map 迭代中拥有两个表行。

我认为有多种方法可以做到这一点。

我可以使用与我要展开的事件的 id 相关联的 if 语句将表格行换成跨越表格宽度的行，其中包含一个 div。

我可以在表格行下方查询一个 div（不知道如何实现）。

<tbody className={loading}>
      {this.state.events.map((event, id) => 
        <tr key={event.id}>
          <td>{event.data || ' '}</td>
          <td>{event.otherData}</td>
          <td><TimeStamp time={event.timestamp} /></td>
          <td><button onClick={() => this.onShowInfo(event)}>
            <i className="fa fa-search-plus" /></button></td>
        </tr>
      )}
    </tbody>

JSX 使得在 map 函数中呈现两行是不可能的

【问题讨论】：

为什么“JSX 不可能”？
你不能有一个没有被一个元素包裹，你不能把一个 tr 包裹在一个 tbody 标签里面的 div 里面跨度>
不是为了返回值，但是你可以有两个单独的逻辑块，并且在这个逻辑块的正下方有一个，它应该可以正常工作

标签： javascript jquery reactjs

【解决方案1】：

您的问题的解决方案可以在这里找到：How to return multiple lines JSX in another return statement in React?

使用这个例子：

{[1,2,3].map(function (n) {
  return ([
    <h3></h3>, // note the comma
    <p></p>
  ]);
})}

【讨论】：

【解决方案2】：

虽然您是对的，您的逻辑块中不能返回多个父 tr，但您可以有多个块，这样就可以正常工作：

<tbody className={loading}>
      {this.state.events.map((event, id) => 
        <tr key={event.id}>
          <td>{event.data || ' '}</td>
          <td>{event.otherData}</td>
          <td><TimeStamp time={event.timestamp} /></td>
          <td><button onClick={() => this.onShowInfo(event)}>
            <i className="fa fa-search-plus" /></button></td>
        </tr>
      )}
      {this.returnSomeOtherTr()}
    </tbody>

其中returnSomeOtherTr 是一个返回其他<tr> 的函数。

【讨论】：

但我希望能够在特定行下呈现一行以显示有关该行的更多信息。您的示例只是在其余映射行下方呈现一个单独的行
明白了。如果您只是在事件地图中更新它而不是“交换” trs 怎么办？你可以有一个processedEvents 数组，它有一个“扩展的” tr 来代替非扩展的。你目前的想法是什么让 JSX 阻止你执行？

【解决方案3】：

因此，我没有通过事件数组进行映射，而是将每个事件推入带有 for 循环的数组中。当我想要详细信息的事件出现时，我的 for 循环将推送一个占据整个跨度的附加行（通过 colSpan），以便我有适当的空间来使用。

eventRows(events){
  var eventsArray = []

  for (var ev of events) {
    eventsArray.push(
      <tr key={ev.id}>
      </tr>
    )
    if(ev.id === this.state.showInfo.id) {
      eventsArray.push(
        <tr>
          <td colSpan='5'>
          </td>
        </tr>
      )
    }
  }
}

【讨论】：