使用 Bootstrap 4 和 ReactJS 创建可折叠的表格单元格答案

【问题标题】：Creating collapsible table cells with Bootstrap 4 and ReactJS使用 Bootstrap 4 和 ReactJS 创建可折叠的表格单元格
【发布时间】：2018-07-05 02:30:27
【问题描述】：

每个表格行都必须允许用户单击它并获取与该行相关的信息子集。我做了一些搜索，发现了这个帖子：Twitter Bootstrap Use collapse.js on table cells [Almost Done]

我在我的代码上得到了这个解决方案，但我遇到了一个问题，我只得到一个隐藏行，显示在表的底部作为最后一行，而不是在每个单独的行下面被映射葡萄藤阵列。

这是我的代码：

          <div className="card-block">
              <Table hover bordered>
                  <thead>
                  <tr className="table-heading">
                      <th className="table-header">Entity</th>
                      <th className="table-header">Category</th>
                      <th className="table-header">Source</th>
                      <th className="table-header">Risk Score</th>
                  </tr>
                  </thead>
                  <tbody>
                  {this.state.gvEntries.map(grapevine => (
                    <tr data-toggle="collapse" data-target="#demo1" className="accordion-toggle">
                        <td>{grapevine.entity}</td>
                        <td>{grapevine.category}</td>
                        <td>{grapevine.source}</td>
                        <td>{grapevine.rscore}</td>
                    </tr>
                  ))}
                  <tr >
                      <td colSpan="6" className="hiddenRow"><div className="accordian-body collapse" id="demo1"> Demo1 </div></td>
                  </tr>
                  </tbody>
              </Table>
            </div>

任何帮助将不胜感激，谢谢！

【问题讨论】：

标签： javascript css twitter-bootstrap reactjs bootstrap-4

【解决方案1】：

保存隐藏行的 tr 应该在 map 函数和 data-target 属性内移动，并且 id 应该是变量（例如索引）

类似：

map((grapevine, idx) => (
  <tr data-toggle="collapse" data-target={"#demo"+idx} className="accordion-toggle">
  ...
  <tr >
    <td colSpan="6" className="hiddenRow"><div className="accordian-body collapse" id={"#demo"+idx}> Demo1 </div></td>
  </tr>
)

【讨论】：

当我尝试得到“语法错误：相邻的 JSX 元素必须包含在封闭标记中”
将它们包裹在地图内的中

【解决方案2】：

data.map(sale => {
            return (
              <tbody key={sale.id}>
                <tr id={sale.id} onClick={handleCollapse}>
                  <td>
                    <a className="no">{sale.id}</a>
                  </td>
                  <td>{date.utcToLocal(sale.createdOn)}</td>
                </tr>
                { toggleDetails && 
                 <tr>
                  <td>Order Details is here must be</td>
                </tr> }
              </tbody>
            );
          })}

【讨论】：