React:validateDOMNesting:#text不能作为<tr>的子项出现

Question

你能解释一下为什么反应显示警告Warning: validateDOMNesting(...): #text cannot appear as a child of <tr>. See Router > RouterContext > CarWashPage > AllCarWashTable > tr > #text.吗？我在标签内看不到任何文字tr

呈现表的代码

export default class AllCarWashTable extends React.Component{

constructor(props) {
    super(props);
    this.generateHeaders = this.generateHeaders.bind(this);
    this.generateRows = this.generateRows.bind(this);
};

static propTypes = {
    cols : React.PropTypes.array.isRequired,
    rows : React.PropTypes.array.isRequired
}

generateHeaders() {
    let cols = this.props.cols;  // [{key, label}]
    return cols.map(function(colData) {
        return <th key={colData.key}> {colData.label} </th>;
    });
}

generateRows() {
    let cols = this.props.cols,  // [{key, label}]
        data = this.props.rows;
    if (this.props.rows.length > 0) {
        return data.map(function(item) {
            var cells = cols.map(function(colData) {
                return <td key={colData.key}> {item[colData.key]} </td>;
            });
            return <tr key={item.id}> {cells} </tr>;
        });
    }
}

render(){
    let headers = this.generateHeaders();
    let rows = this.generateRows();

    return (
         <table className="table table-hove">
             <thead>
                <tr>
                    {headers}
                </tr>
             </thead>
             <tbody>
                    {rows}
             </tbody>

         </table>
    )
}
}

最后,我的表格具有以下结构

问题出在哪儿？

Answer 1

问题是这一行中的空格:

return <tr key={item.id}> {cells} </tr>;

它可能看起来很愚蠢,但你实际上是渲染单元格和一些空格(即文本).它应该如下所示:

return <tr key={item.id}>{cells}</tr>;

Answer 2

使用逻辑AND短路&&显示/隐藏条件行时，也会发生这种情况：

{
  foo && (<tr><td>{foo}</td></tr>)
}

将其更改为三元a ? b : c形式，其中c null将修复它

{
  foo ? (<tr><td>{foo}</td></tr>) : null
}

Answer 3

在我的情况下是一个空的''输出（里面没有空间）

<tbody>
  {this.props.orders.map(
    order =>this.props.selectedAgent === order.agent ? 
      <Row item={order} key={ order._id } /> : ''
    )
  }
</tbody>

该空的伎俩：

<tbody>
  {this.props.orders.map(
    order =>this.props.selectedAgent === order.agent ? 
      <Row item={order} key={ order._id } /> : null
    )
  }
</tbody>

Answer 4

可接受的答案并不是我的根本原因。<th>标记后有评论时，我也收到同样的警告。当我删除评论时，警告消失了。

const TableHeaders = (props) => (
  <tr>
    <th>ID</th> {/* TODO: I had a comment like this */}
  </tr>
)

编辑：删除之间的空间，</th>也{/*将达到目的。

Answer 5

一个<tr>HTML标签指示表行。因此，要在表格行内显示的任何文本都必须放在<td>HTML 标记内。这将消除错误。

例子：

return (
    <tr>
        <td> {/* Using <td> inside <tr> */}
            Hello World!
        </td>
    </tr>
);