validateDOMNesting (. .): & lt; tr>不能作为

validateDOMNesting(...): <tr> cannot appear as a child of <div>

本文关键字：不能 tr lt validateDOMNesting      更新时间：2023-09-26
的子元素出现。

我正在努力得到这份工作:

订单:

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.

有什么好办法吗?

将OrderRow <tr>包装在<tbody>中，正如这里的问题所解释的那样，浏览器需要<tbody>标签。如果它不在您的代码中，那么浏览器将自动插入它。这在第一次渲染时工作得很好，但是当表被更新时，DOM树与React期望的不同。这可能会产生奇怪的bug，因此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>
  );
}

像这样:

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

或者更优雅的:

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

它将tr呈现为div，所以使用.map()代替:)

你能试试更自动的吗?

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>
  );
}
相关文章：