使用 React-dnd 的 MUI 樹視圖

Question

我有一個材質 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

這可能是由於選擇了樹項而發生的。 即使在TreeView<\/code> disableSelection<\/code>設置為 true ，單擊的子項也會以某種方式通過根級別的aria-activedescendant<\/code>屬性獲得焦點。

我們可以通過在TreeItem<\/code>添加onFocusCapture={e => e.stopPropagation()}<\/code>來跳過這個焦點事件，這有效地使項目可拖動。