Question

我在React中有一个表，用户可以在其中添加可变数量的行。

<div>
    <table class="table table-condensed table-bordered">
        <tr>
            <th>List Names</th>
            <th>List Full Names</th>
            <th>List Descriptions</th>
        </tr>
        {this.displayTableBody()}
    </table>

    <button style={{display:'inline-block'}} type="button" 
            className="btn btn-primary btn-small" onClick={this.addList}>
        <span className="glyphicon glyphicon-plus"></span>
    </button>
</div>

行由displayTableBody方法添加：

displayTableBody: function() {
    var rows = Array.apply(null, Array(this.state.rowNr)).map(
        function(e1, index) {
            return <ListInput key={index} ref={index}/>
        }
    );
    return(<div>{ rows }</div>);
}

一行由ListInput组件构成，该组件具有以下render方法：

render: function() {
    return (
        <tr>
            <td>{this.displaySimpleInputField(
                "List Name(<15 characters - A-Z, 0-9 and _ only)", this.setListName, "input")}</td>
            <td>{this.displaySimpleInputField(
                "List Full Name(<75 characters)", this.setListFullName, "input")}</td>
            <td>{this.displaySimpleInputField(
                "List Description(<225 characters)", this.setListDescription, "input")}</td>
        </tr>
    )
}

但是，当我添加一行时，它会放在表头上方：

Answer 1

使用表时，编写有效的HTML非常重要，否则你会得到这样奇怪的结果。具体来说，表的正确结构有点像这样：

<table>
  <thead>
    <tr><th></th></tr>
  </thead>
  <tbody>
    <tr><td></td></tr>
  </tbody>
</table>

具体来说，我非常确定您不能将div直接放在table中，就像使用displayTableBody方法一样。尝试重写您的组件以遵循HTML standard，我相信这是导致您出现问题的原因。

Answer 2

您正在将div元素直接插入到表格中，这是不正确的html，它确实打破了布局placing that element at the top of the table。

我建议您按如下方式重构代码，并考虑使用times function from lodash：

displayTableBody: function() {
  var rows = times(this.state.rowNr).map(
    function(index) {
      return <ListInput key={index} ref={index}/>
    }
  );
  return(<tbody>{ rows }</tbody>);
}

表格

<table class="table table-condensed table-bordered">
  <thead>
    <tr>
      <th>List Names</th>
      <th>List Full Names</th>
      <th>List Descriptions</th>
    </tr>
  </thead>
  {this.displayTableBody()}
</table>

React - 表创建错误

2 个答案: