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

【问题标题】：React MUI TreeView / React DnD: How to use a draggable component?React MUI TreeView / React DnD：如何使用可拖动组件？
【发布时间】：2023-01-26 14:51:59
【问题描述】：

在我的 React 网络应用程序中，我想

将项目从左侧的MUI TreeView 拖动到右侧的放置目标之一
在放置目标之间拖放项目
UI mockup:

第二部分已经开始工作了。

至于第一部分，我确实设法使它们可拖动（遵循React DnD Basic Example）并且我可以将它们从树视图拖动到放置目标中：
```
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 clone 示例，但其中似乎有太多不相关的东西，以至于我看不到所有树木的森林。另外，我不确定这个 MUI styled(TreeItem)(({ theme }) 概念是否适用于我想要实现的目标。

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

【问题讨论】：

标签： reactjs typescript material-ui treeview react-dnd

【解决方案1】：

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

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

好吧，从技术上讲，文档确实将 node 声明为 TreeView label prop 的类型，但这看起来真的像是那种只有在你已经知道之后才会看到的信息——而且树节点标签。因为描述真的听起来像一个字符串而不是一个组件。

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

【讨论】：

【解决方案2】：

这不是答案，但我有一个与你的要求非常相似的要求......你能参考我在哪里可以找到更好的此类示例......在我工作的应用程序我们使用了 Tree ...其中的项目表示类似于您的项目....

【讨论】：