作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试完成这项工作:
订单:
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/
我是一名优秀的程序员,十分优秀!