在父行下插入子行

我渲染行使我的网页看起来像电子表格。 我添加行的方式是这样的，它工作正常：

var StockRow = React.createClass({ unwatch: function() { this.props.unwatchStockHandler(this.props.stock.symbol); }, render: function () { var lastClass = '', changeClass = 'change-positive', iconClass = 'glyphicon glyphicon-triangle-top'; if (this.props.stock === this.props.last) { lastClass = this.props.stock.change < 0 ? 'last-negative' : 'last-positive'; } if (this.props.stock.change < 0) { changeClass = 'change-negative'; iconClass = 'glyphicon glyphicon-triangle-bottom'; } return ( <tr> <td><button type="button" className="btn btn-default btn-sm" onClick={this.unwatch}> <span className="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> </button></td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{this.props.stock.symbol}</td> <td className={lastClass}>{this.props.stock.last}</td> <td className={changeClass}>{this.props.stock.change} <span className={iconClass} aria-hidden="true"></span></td> <td>{this.props.stock.high}</td> <td>{this.props.stock.low}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> </tr> //See edit below to add hidden row here. This part doesn't work. <tr style="display: none;" class="subRow"> <td {5} </td> </tr> ); } }); 

行上的初始项目包含一个带有plus号图标的button。 我想要做的就是模拟一个类似树的视图，以便当用户点击button时，图标变成父行的minus ，在父项之间添加一组新的子行和下一个父项目。 子行项目上没有button。

如果没有专门的网页控制，这太难了吗？ 如果不是，如果有人能给我一个很好的简单例子。

编辑

 CSS .offscreen { position: absolute; left: -1000px; top: 0px; overflow:hidden; width:0; } .subRow { background-color: #CFCFCF; } 

如果我尝试在上面的代码中添加一个隐藏的行，在其中显示“请参阅下面的编辑以在此处添加隐藏行”，它不起作用：

 <tr style="display: none;" class="subRow"> <td {5} </td> </tr>