反应：validateDOMNesting：#text 不能作为 <tr> 的子项出现

Question

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

中没有看到任何文字

呈现 table

的代码

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>
    )
}
}

最后，我的table结构如下

问题出在哪里？

Answer 1

问题是这一行中的空格：

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

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

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

Answer 2

接受的答案并不是我的问题的根本原因。当我在 <th> 标签后发表评论时，我收到了同样的警告。当我删除评论时警告消失了。

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

编辑：删除 </th> 和 {/* 之间的 space 也可以解决问题。

Answer 3

除了@Jarno 的回答，我也运行关注这个问题。仔细检查您的 javascript 代码末尾没有任何额外的 } 或 {：

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

Answer 4

在我的例子中，有一个空的 '' 输出（w\o space 里面）

<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 5

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

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

Answer 6

通知警告：validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>。确保源代码每一行的标记之间没有任何额外的白色 space。在我的例子中，初始化变量不应该是 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

当使用逻辑与短路 && 到 show/hide 条件行时也会发生这种情况：

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

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

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

Answer 8

万一其他人在 React 中遇到此错误或类似的 Material UI 空白错误，我在破坏我的代码数小时后的解决方案是一个简单的 javascript 注释我的 table.

 { /*  sortable here */ }

我从 table 元素之间删除了它，警告消失了。

Answer 9

当我在没有 <td> 元素的 <tr> 元素中放置文本时收到此警告。我用 <td> 元素包裹了我的文本，警告消失了。

当我这样做时，文本中有空格或使用了 {} 都没有关系。

Answer 10

在我的例子中，我确实在 <tr> 中有一个 <tr>（打算使用 <td>）:)

Answer 11

在我的例子中，用 null 而不是 "" 初始化一个变量工作正常

Answer 12

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

Answer 13

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

示例：

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

Answer 14

确保 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 15

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

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

不过你也可以这样修复：

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

Answer 16

删除评论对我也有帮助

Answer 17

您不应在 table 正文标记中传递意外元素。你应该使用 tr 和 td

在您的行中 return 具有 tr 和 td

的元素

{rows}

类似

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

反应：validateDOMNesting：#text 不能作为 <tr> 的子项出现

React: validateDOMNesting: #text cannot appear as a child of <tr>

warnings

reactjs