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

使用逻辑 AND 短路

&&

显示/隐藏条件行时也会发生这种情况：

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

将其更改为三元

a ? b : c

形式，其中c是

null

将修复它

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

Answer 2

问题是这一行中的空格：

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

这可能看起来很愚蠢，但您实际上正在渲染单元格和一些空白（即文本）。它应该看起来像这样：

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

Answer 3

在我的例子中，输出是空的

''

（内部没有空间）

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

null 可以解决问题：

<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

A

<tr>

HTML 标记表示表格行。因此，要在表格行内显示的任何文本都必须放置在

<td>

HTML 标记内。这将消除错误。

示例：

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

Answer 6

通知警告：

validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>

。确保源代码每行的标记之间没有任何额外的空格。就我而言，初始化变量不应该是

null

。

 let elementCart = ''; {/* in the here,warning will append  */}
    if(productsCart.length > 0){
        elementCart = productsCart.map((item, index) => {
            return <CartItem item={item} key={index} index={index} />
        });
    }

    return(
        <tbody id="my-cart-body">
            {elementCart}
        </tbody>
    )

解决方案：

let elementCart = null;

Answer 7

如果其他人在 React 中使用 Material UI 遇到此错误或类似的空白错误，我在破坏代码数小时后的解决方案是在表中添加一个简单的 javascript 注释。

 { /*  sortable here */ }

我将其从表格元素之间删除，警告消失了。

Answer 8

确保

let

变量已赋值，否则将初始化一个新的空数组。

{headers ? headers : []}

or

{rows || []}

对我来说，它就像一种魅力......

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

    return (
         <table className="table table-hove">
             <thead>
                <tr>
                    {headers ? headers : []}
                </tr>
             </thead>
             <tbody>
                    {rows || []}
             </tbody>

         </table>
    )
}

也

|| null

可以解决。重要的是价值不是

''

Answer 9

Kevin Law（来自其他评论）说你可以这样做：

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

但是你也可以像这样修复它：

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

Answer 10

2
投票

删除评论对我也有帮助

Answer 11

在我的例子中，用 null 而不是“”初始化变量效果很好

Answer 12

除了@Jarno的回答之外，我也遇到了这个问题。仔细检查您的 javascript 代码末尾是否没有任何额外的

或

：

{this.props.headers.map(header => <th key={header}>{header}</th>)}}
                                                                  ↑

Answer 13

当我使用括号而不是大括号时，我收到此警告

<table>
  <tbody>
    <tr>
      (showMsg && <td>Hi</td>} // leading '(' should be a '{'
    </td>
  </tbody>
</table>

Answer 14

当我将文本放入没有

<tr>

元素的

<td>

元素时，我收到此警告。我用

<td>

元素包裹文本，警告消失了。

当我这样做时，文本中有空格或使用 {} 并不重要。

Answer 15

就我而言，我确实在

<tr>

内有一个

<tr>

（打算使用

<td>

）:)

Answer 16

很容易找到。只需打开检查并查找标签即可。它应该出现在标签的开头或结尾，一个带引号的字符串，如下所示：

Answer 17

您不应在表主体标记中传递意外元素。你应该使用 tr 和 td

在您的行中将返回带有 tr 和 td

的元素

{rows}

类似的东西

return(
    <tr>
        <td> 
            Hello
        </td>
    </tr>
)

Answer 18

对于我的情况，我收到此错误是因为我忘记更新 SQL 查询以包含更新的列名称。原始查询试图访问不存在的列。

此查询与 Nextjs、React、Material UI 一起使用，并发送到 PostgreSQL 服务器，以便加载 MUI 前端表以及表中的数据库信息。

更新查询解决了该问题。

Answer 19

出现这种情况可能是由于以下任一原因：

显示空白 (
```
''
```
) 或
```
false
```
而不是
```
null
```

let foo = '';
...
<tr><td>{foo}</td></tr>}
...

或

let foo = null;
...
{foo && (<tr><td>{foo}</td></tr>)}
...

或

let foos = [];
...
{foos.length && foos.map((foo) => (
  <tr><td>{foo}</td></tr>
)}
...

有额外的空间

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

使用错误的标签

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

正确方法

...
<tr><td>{foo || null}</td></tr>

{/* OR */}

{foos.map((foo) => (
  <tr><td>{foo}</td></tr>
)}

{/* OR */}

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

React：validateDOMNesting：#text 不能作为 <tr>

问题描述投票：0回答：19

19个回答

正确方法

最新问题

React：validateDOMNesting：#text 不能作为 <tr>

问题描述 投票：0回答：19

19个回答

正确方法

最新问题

问题描述投票：0回答：19