reactjs渲染方法中的引导折叠面板答案

【问题标题】：Bootstrap collapse panel in reactjs render methodreactjs渲染方法中的引导折叠面板
【发布时间】：2018-04-20 04:25:29
【问题描述】：

我想折叠 ReactJS 表格行中的几列。请找到正在尝试的代码。

render() {
    return (
            <tr>
            <button className="btn btn-primary" type="button" 
            data-toggle="collapse" 
            data-target="#collapseExample" 
            aria-expanded="false" 
            aria-controls="collapseExample">
            +
            </button>
            <td>{ this.state.item.line_number }</td>
            <td>{ this.state.item.product_code }</td>
            </tr>

            <tr className="collapse" id="collapseExample">
            <div className="well">
            <td>{ this.state.item.net_price }</td>
            <td>{ this.state.item.discount }</td>
            </div>
           </tr>
          )
        }

单击“+”按钮后，我想打开面板（折叠面板）。但是在第二个标签上出现错误。我无法在 render() 方法中渲染两个标签。

我怎样才能实现这个解决方案？

【问题讨论】：

您的代码至少有两个问题，一个是 TR 元素只能有子 TD 或 TH（您有一个按钮），并且在该按钮上您使用的是“类”而不是类名
className 没问题，就是拼写错误。但不确定如何渲染另一个应该是折叠一个。

标签： twitter-bootstrap reactjs html-table collapse

【解决方案1】：

我正在使用 ReactJS 15.6.1 版本，在这个版本中 return() 方法不支持多个 <tr> 标记来呈现。从 ReactJS 16+ 版本我们可以return() 组件数组。因此，ReactJS 16+ 版本是可能的。

【讨论】：