使用 React-dnd 的 MUI 树视图

Question

我有一个 material ui v4 树视图，可以使用下面的代码与 react-dnd 一起正常工作。

当我升级到 mui v5 树视图时，拖动不再起作用，项目不再可拖动。

我查看了 2 个 TreeItem 实现，但有很多变化，我迷路了。

https://github.com/mui-org/material-ui/blob/v4.x/packages/material-ui-lab/src/TreeItem/TreeItem.js

https://github.com/mui-org/material-ui/blob/master/packages/mui-lab/src/TreeItem/TreeItem.js

我错过了什么？非常感谢您的回答:)

//recursive function to generate TreeItem tree with Drag embedded
function Box({ treeItem }) {
  const [{ isDragging }, drag, preview] = useDrag(() => ({
    type: "TREEVIEW",
    item: !treeItem.children.length //if the resource has no child
      ? treeItem.data // we provide only the resource data
      : [
          treeItem.data,
          ...flatten(extractChildren(treeItem), extractChildren).map(
            //other wise we provide resource + child resources
            (x) => delete x.children && x
          ),
        ],
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  return (
    <>
      <DragPreviewImage connect={preview} src={knightImage} />
      <TreeItem
        nodeId={treeItem.data.TreeID}
        label={treeItem.data.TreeName}
        ref={drag}
        style={{ isDragging }}
      >
        {treeItem.children &&
          treeItem.children.map((treeItem) => <Box treeItem={treeItem} />)}
      </TreeItem>
    </>
  );
}

const renderedListItems = tree.map((treeItem) => (
  <Box treeItem={treeItem} />
));

Answer 1

发生这种情况的原因可能是在单击树项时选中了树项。尽管 disableSelection 在 TreeView 中设置为 true，但点击的子级仍以某种方式通过 aria-activedescendant 属性在根级别聚焦。

我们可以通过在 TreeItem 处添加 onFocusCapture={e => e.stopPropagation()} 来跳过此焦点事件，这有效地使项目可拖动。

使用 React-dnd 的 MUI 树视图

MUI tree view with React-dnd

javascript

material-ui

react-dnd