validateDOMNesting(...):<tr> 不能作為孩子出現<div>

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

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

Answer 3

或者更優雅：

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

Answer 4

它將tr渲染為div ，因此請改用.map() :)

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