REACT：validate DOMNesting：#Text不能作为&lt；tr&gt；的子项出现 [英] React: validateDOMNesting: #text cannot appear as a child of <tr>

问题描述

您能解释一下为什么REACTION显示WARNINGWarning: 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>
    )
}
}

最后我的表具有以下结构

问题出在哪里？

推荐答案

问题在于该行中的空格：

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

这看起来可能很愚蠢，但您实际上呈现的是单元格和一些空格(即文本)。它应该如下所示：

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

这篇关于REACT：validate DOMNesting：#Text不能作为&lt；tr&gt；的子项出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！