validateDOMNesting(...): не может отображаться как дочерний элемент

#javascript #reactjs

Вопрос:

Я пытаюсь выполнить эту работу:

Заказы:

 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.

Есть идеи, как это исправить?

1. внутри таблицы div у вас не может быть промежуточного элемента между любым из этих table , thead , tbody , tr , td . однако вы можете иметь div внутри td убедитесь, что ваш HTML следует этому.

2. Но где это <div> внутри моего кода??

3. Об этом говорится в сообщении об ошибке. И даже я не вижу возможного div в приведенном выше коде. Если это полный код, то это странно.

4. Не отображается, когда я делаю это в этой скрипке: jsfiddle.net/v9whLm5w/1

5. Нет, это работает…

Ответ №1:

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

Ответ №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>
  );
}

Ответ №4:

Он отображается tr в div , поэтому используйте .map() вместо этого 🙂

Ответ №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>
  );
}