javascript - React - 表创建不正确

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>

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