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

Question

我想在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（）方法中呈现两个标记。

我如何才能实现这个解决方案。？

Answer 1

使用ReactJS 15.6.1版本并且在此版本中return()方法不支持多个<tr>标记进行渲染。从ReactJS 16+版本我们可以return()组件数组。因此，它可以使用ReactJS 16+版本。