<td> не может появиться как потомок `div`?

Question

Я следую этому примеру https://codesandbox.io/s/little-star-yq2h8, который использует состояние.Теперь я делаю тот же пример, используя hooks

, но получаю эту ошибку

validateDOMNesting(...): <td> cannot appear as a child of <div>.
    in td (at editable-cell.js:34)
    in div (at editable-cell.js:56)
    in EditableCell (created by TableCell)
    in TableCell (created by TableRow)
    in tr (created by BodyRow)
    in BodyRow (created by TableRow)
    in TableRow (created by Connect(TableRow))
    in Connect(TableRow) (created by ExpandableRow)
    in ExpandableRow (created by Conne

, и представление строки не отражает почему?вот мой код https://codesandbox.io/s/reverent-burnell-l504y

const PmViewList = () => {
  return (
    <Fragment>
      <EditableFormTable />
    </Fragment>
  );
};

Answer 1

Похоже, компонент editable-cell возвращает это:

        <div>
            <EditableContext.Consumer>{renderCell}</EditableContext.Consumer>
        </div>

Между тем renderCell возвращает что-то вроде этого:

               <td {...restProps}>
                   [cell contents]
               </td>

Мой опыт с реакцией ограничен, ноЯ предполагаю, что это означает, что ваша ячейка будет генерировать HTML с <div> с <td> внутри, что недопустимо.<td> разрешены только внутри элементов, ориентированных на таблицу, таких как <tr>.

Простое удаление этих тегов <div>, похоже, заставит все работать: