<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>

我对react的经验是有限的，但是我猜这意味着您的单元格将要产生其中包含<div>的{​​{1}}的HTML，这是无效的。 <td>仅在<td>之类的面向表的元素内使用。

只需删除这些<tr>标签就可以使工作正常：