Question

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

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

我可以使用if语句将表行替换为跨越表格宽度的行，并使用与我想要展开的事件的id相关联的if语句。

我可以在表格行下面jquery一个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使得无法在地图函数中呈现两行

Answer 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>
  ]);
})}

Answer 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>的函数。

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

单击具有映射数据的行时，在表行下创建一个div

3 个答案: