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

Question

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

订单:

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.

有什么解决办法吗？

Answer 1

包装你的 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>
  );
}