validateDOMNesting(...):< tr>不能显示为< div>的子级 [英] validateDOMNesting(...): <tr> cannot appear as a child of <div>

问题描述

我正在努力完成这项工作:

I'm trying to get this work:

订单:

render () {
    const orders = this.state.orders.map((order, index) => <OrderRow order={order} key={index}/>);

    return (
        <table>
            <tbody>
                {orders}
            </tbody>
        </table>
    );
}

OrderRow:

render () {
    return (
        <tr>
            <td>{this.props.order.number}</td>
            <td>{this.props.order.products}</td>
            <td>{this.props.order.shippingDate}</td>
            <td>{this.props.order.status}</td>
        </tr>
    );
}

但仍然出现此错误:

警告:validateDOMNesting(...):不能作为的子代出现.参见订单> div> OrderRow> tr.

Warning: validateDOMNesting(...): cannot appear as a child of . See Orders > div > OrderRow > tr.

有什么想法要解决吗?

推荐答案

将您的OrderRow < tr> 包裹在&t; tbody> 中，如问题此处，浏览器需要< tbody> 标记.如果它不在您的代码中，则浏览器将自动将其插入.这将在第一次渲染时很好地工作，但是当表被更新时，DOM树将与React期望的有所不同.这可能会带来奇怪的错误，因此React会警告您插入< tbody> .

Wrap your OrderRow <tr> in <tbody> as explained in issue here, Browsers need the <tbody> tag. If it is not in your code, then the browser will automatically insert it. This will work fine on first render, but when the table gets updated, then the DOM tree is different from what React expects. This can give strange bugs, therefore React warns you to insert the <tbody>.

OrderRow

render () {
    return (
       <table>
        <tbody>
         <tr>
            <td>{this.props.order.number}</td>
            <td>{this.props.order.products}</td>
            <td>{this.props.order.shippingDate}</td>
            <td>{this.props.order.status}</td>
         </tr>
        </tbody>
       </table>
    );
}

这篇关于validateDOMNesting(...):< tr>不能显示为< div>的子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！