Question

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

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符号图标的按钮。我想要做的是模拟树状视图，以便当用户单击按钮时，图标将更改为父行上的minus符号，并在下面添加一定数量的新子行父项和下一个父项之间。子行项目上没有按钮。

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

修改

CSS

.offscreen {
  position: absolute;
  left: -1000px;
  top: 0px;
  overflow:hidden;
  width:0;
}

.subRow {
    background-color: #CFCFCF; 
}

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

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

在父行下插入子行

0 个答案: