javascript - 不能作为 `div` 的 child 出现？

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

行 View 没有反射(reflect)为什么？这是我的代码 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> 的 HTML用<td>在里面，这是无效的。 <td> s 只允许在面向表格的元素内部使用，例如 <tr> .

只需删除那些 <div>标签似乎可以使事情正常进行: