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

Question

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

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

用户界面模型：

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

至于第一部分，我确实设法使它们可拖动（遵循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 属性示例，但在我看来，当我采用这种方法时，我需要重新实现（即重复）许多内置树功能（扩展节点） 、折叠、选择等）。

我还尝试理解 MUI TreeView 文档Gmail 克隆示例，但其中似乎有太多不相关的内容，以至于我看不到所有树木的森林。另外，我不确定这个 MUIstyled(TreeItem)(({ theme })概念是否旨在实现我想要实现的目标。

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

Answer 1

找到解决方案：MUI TreeView API 文档似乎没有提到这一点，但TreeItem labelprop 可以是一个简单的字符串（通常是这样） - 或整个组件，例如我的自定义组件：

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

好吧，从技术上讲，文档确实声明了propnode的类型TreeView label，但这看起来确实像是一种只有在您已经了解之后才能看到的信息 - 以及树节点标签。因为描述听起来确实像一个字符串，而不像一个组件。

用户界面现在如下所示：