Bootstrap reactjs 渲染方法中的折叠面板

Question

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

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() 方法中呈现两个标签。

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

Answer 1

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

Bootstrap reactjs 渲染方法中的折叠面板

Bootstrap collapse panel in reactjs render method

html-table

collapse

twitter-bootstrap

reactjs