gpt4 book ai didi

javascript - 验证 DOM 嵌套 (...) : cannot appear as a child of

转载 作者:搜寻专家 更新时间:2023-11-01 05:21:06 26 4
gpt4 key购买 nike

我正在尝试完成这项工作:

订单:

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

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

订单行:

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

但还是报错:

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

有什么解决办法吗?

最佳答案

包装你的 OrderRow <tr><tbody>如问题 here 中所述, 浏览器需要 <tbody>标签。如果它不在您的代码中,那么浏览器将自动插入它。这在第一次渲染时会很好地工作,但是当表格更新时,DOM 树与 React 期望的不同。这会产生奇怪的错误,因此 React 会警告您插入 <tbody> .

订单行

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

关于javascript - 验证 DOM 嵌套 (...) : <tr> cannot appear as a child of <div>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39915629/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com