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

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

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

我可以使用绑定到要展开的事件id的if语句，将一个表行交换为一个跨表宽度的行，其中包含一个div

我可以jquery表行下面的一个div（不知道如何实现）

{this.state.events.map（（事件，id）=>
{event.data | |'''}
{event.otherData}
this.onShowInfo（事件）}>
)}

---

JSX使在映射函数中渲染两行变得不可能

您的问题的解决方案可以在这里找到：

使用以下示例：

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

{[1,2,3]。映射（函数（n）{
返回([
，//注意逗号

]);
})}

虽然您是对的，但在逻辑块中不能返回多个父级

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>

{this.state.events.map（（事件，id）=>
{event.data | |'''}
{event.otherData}
this.onShowInfo（事件）}>
)}
{this.returnSomeOtherTr（）}

---

其中

returnSomeOtherTr

是一个返回其他

的函数，因此我没有通过事件数组进行映射，而是将每个事件推送到一个带有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>
      )
    }
  }
}

eventRows（事件）{
var eventsArray=[]
用于（事件的var ev）{
推(
)
if（ev.id==this.state.showInfo.id）{
推(
)
}
}
}

为什么“使用JSX是不可能的”？如果两个元素都没有被一个元素包装，你不能在tbody标记内包装一个tr-inside-of-div，而不是返回值，但是你可以有两个独立的逻辑块，在这个逻辑块的正下方有一个，它应该可以正常工作，但是我希望能够在特定行下渲染一行，以显示关于该行的更多信息。您的示例只是在其余映射行的下方呈现一个单独的行。如果您只是在事件地图中更新了trs而不是“交换”trs，该怎么办？您可以有一个

processedEvents

数组，该数组用“扩展的”tr代替未扩展的tr。你目前认为哪个JSX阻止你执行？

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