validateDOMNesting(...): <tr> 不能作为 <div> 的子项出现答案

【问题标题】：validateDOMNesting(...): <tr> cannot appear as a child of <div>validateDOMNesting(...): <tr> 不能作为 <div> 的子项出现
【发布时间】：2017-02-16 08:35:16
【问题描述】：

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

订单：

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

但仍然出现此错误：

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

有什么解决办法吗？

【问题讨论】：

在表格中，table、thead、tbody、tr、td 之间不能有 div。但是，您可以在 td 中包含 div，确保您的 HTML 遵循此。
但是我的代码里面的<div>在哪里？？
错误信息是这样说的。甚至我在上面的代码中也看不到可能的 div。如果这是完整的代码，那就太奇怪了。
当我在这个小提琴中这样做时不显示：jsfiddle.net/v9whLm5w/1
不，它正在工作......

标签： javascript reactjs

【解决方案1】：

如问题here 中所述，将OrderRow <tr> 包装在<tbody> 中，浏览器需要<tbody> 标签。如果它不在您的代码中，则浏览器将自动插入它。这在第一次渲染时可以正常工作，但是当表格更新时，DOM 树与 React 所期望的不同。这可能会产生奇怪的错误，因此 React 会警告您插入 <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>
  );
}

【讨论】：

他正在将他的 tr 包裹在一个 tbody 中。这没有回答问题。

【解决方案2】：

类似这样的：

render() {
  return (
    <table>
      <tbody>
        {this.state.orders.map((order, index) => {
          <tr index={index}>
            <td>{order.number}</td>
            <td>{order.products}</td>
            <td>{order.shippingDate}</td>
            <td>{order.status}</td>
          </tr>
        })}
      </tbody>
    </table>
  );
}

【讨论】：

【解决方案3】：

或者更优雅：

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

【讨论】：

看来都是webpack-dev-server的错，使用简单的webpack命令构建时，一切正常。

【解决方案4】：

它将tr 渲染为div，因此请改用.map() :)

【讨论】：

看来都是webpack-dev-server的错，使用简单的webpack命令构建时，一切正常。

【解决方案5】：

你能试试更自动的吗？

render() {
  return (
    <table>
      <tbody>
        {this.state.orders.map((order, index) => {
          <tr index={index}>
            {Object.keys(order).map(function(key,id) {
              return (<td key={id}>{order[key]}</td>)
            })}
          </tr>
         }}
      </tbody>
    </table>
  );
}

【讨论】：