React MUI TreeView / React DnD：如何使用可拖动组件？

Question

在我的 React Web 应用程序中，我想

1. 将项目从左侧的 MUI TreeView 拖动到右侧的放置目标之一
2. 在放置目标之间拖放项目

UI 模型：

第二部分已经可以工作了。

对于第一部分，我确实设法使它们可拖动（遵循React DnD基本示例），我可以将它们从树视图拖动到放置目标中：

const DraggableTreeItem = (props: TreeItemProps) => {
  const [{ isDragging }, drag] = useDrag({
    collect: (monitor: DragSourceMonitor) => ({
      isDragging: monitor.isDragging()
    }),
    item: props,
    type: MyDnDItemType
  })
  return (
    <TreeItem ref={drag} {...props}/>
  )
}

export default DraggableTreeItem;

我的问题：我希望树视图中的项目看起来与放置目标中的项目相同，以保持一定的“UI 一致性”，即在视觉上立即明显看出这些项目是相同的：而不仅仅是 MUI “内置”简单字符串，我想要带有彩色图标（和字符串）的相同项目框：在我看来，理想情况下我应该始终使用相同的组件。

我搞乱了 MUI TreeView 文档中的 ContentComponent prop 示例，但在我看来，当我采用这种方法时，我需要重新实现（即重复）许多内置树功能（展开节点、折叠、选择等）。

我还尝试理解 MUI TreeView 文档 Gmail 克隆 示例，但其中似乎有太多不相关的内容，以至于我看不到所有树木的森林。另外，我不确定这个 MUI

styled(TreeItem)(({ theme })

概念是否旨在实现我想要实现的目标。

我的问题：如何使用我自己的（可拖动）组件作为树视图项？

Answer 1

找到了解决方案： MUI TreeView API 文档似乎没有提到这一点，但是

TreeItem

label

属性可以是一个简单的字符串（通常是这样） - 或整个组件，例如我的自定义成分：

<TreeView >
  <TreeItem label={ <MyComponent/> } nodeId="1"/>
</TreeView>

好吧，从技术上讲，文档确实将

node

声明为

TreeView

label

属性的类型，但这看起来确实像是那种只有在您已经了解之后才能看到的信息 - 以及 树节点标签。因为描述听起来确实像一个字符串，而不像一个组件。

用户界面现在看起来像这样：

Answer 2

您能分享一下您的实现吗？