React 动态添加一行数据（包括一行表格或者非表格）

React 在return中添加table不可以直接嵌套多个tr

在react中的return函数添加表格，代码如下：

<table className="table table-striped table-hover table-bordered">
    <tr>
        <th>姓名</th>
        <th>手机号</th>
    </tr>
    <tr>
        <td>item1</td>
        <td>item2</td>
    </tr>
</table>

浏览器会报这样的错误；

react不会把DOM解析成thead和tbody这样的方式,

解决方式为手动添加，完整代码为：

export default React.createClass({
    render: function() {
        return(
            <div>
                <table className="table table-striped table-hover table-bordered">
                    <thead>
                    <tr>
                        <th>姓名</th>
                        <th>手机号</th>
                        <th>部门</th>
                        <th>角色</th>
                        <th>状态</th>
                        <th>证件类型</th>
                        <th>证件号</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>item1</td>
                        <td>item2</td>
                        <td>item3</td>
                        <td>item4</td>
                        <td>item5</td>
                        <td>item6</td>
                        <td>item7</td>
                        <td><a href="javascript:;">修改</a> | <a href="javascript:;">删除</a></td>
                    </tr>
                    </tbody>
                </table>
            </div>

        )
    }
})

但是遇到必须要添加一行的时候如何是好,或者更加奇怪但是很常见到的例子：

这样问题不是经常见到，会看到它共同点很多，都是添加一行数据，但是保持在表格的结构里，却有一个非共同点，第一列的数据不发生改变，并且随着一行表格的增多，一直保持垂直居中。

解决方法

table中垂直方向合并单元格，除此单元格外，动态添加删除行 做法如下：

• 合并第一个单元格，垂直方向；
• 将其后的单元格全部合并，图片中合并了三个，水平方向
• 根据bootstrap的栅格系统，可以讲其分为三组 代码如下，表示其中一行，放在一个td里面，这样react就不会报语法错误了：

<div className="row row-padding">
    <div className="col-xs-7 row-height">
        <div className="col-xs-3 no-padding">
            <FormField.Number className="form-control"
                              decimalDigits={2}
                              value={model.start}
                              onChange={this.props.onChangeField("start",viewId).bind(this)}
                              disabled
            />
        </div>
        {
            models.indexOf(model) == 0 ?
                <span className="col-xs-3 no-padding">元(包含)到</span> :
                <span className="col-xs-3 no-padding">元(不包含)到</span>
        }
        <div className="col-xs-3 no-padding">
            <FormField.Number className="form-control"
                              decimalDigits={2}
                              value={model.end}
                              onChange={this.props.onChangeField("end",viewId).bind(this)}
            />
        </div>
        <span className="col-xs-3 no-padding">元(包含)</span>
    </div>
    <div className="col-xs-2 no-padding">
        <FormField.Number className="form-control"
                          decimalDigits={2}
                          value={model.addition}
                          onChange={this.props.onChangeField("addition",viewId).bind(this)}
        />
    </div>
    <div className="col-xs-3 row-height">
        {
            models.indexOf(model) == 0 ?
                <a href="javascript:;" onClick={this.addRow.bind(this, model)}>增加分级</a> :
                <a href="javascript:;" onClick={this.removeThis.bind(this, model)}>删除分级</a>
        }

    </div>
</div>