如何为对象数组制作带有复选框的 Muiv5 TreeView？

Question

我正在使用 muiv5 树视图组件来构建树视图下拉列表。该组件没有对选择/取消选择的复选框支持，但经过一番搜索后，我能够找到一种类似的解决方案，但需要传递到树视图的数据是一个对象，并且它有一个父节点。我不需要父节点。基本上我的结构是一个对象数组而不是一个对象。这是codesandbox项目的链接点击这里

丰富的对象是

const data: RenderTree = {
  id: 'root',
  name: 'Parent',
  children: [
    {
      id: '1',
      name: 'Child - 1',
    },
    {
      id: '3',
      name: 'Child - 3',
      children: [
        {
          id: '4',
          name: 'Child - 4',
        },
      ],
    },
  ],
};

但我的数据是

const data = [
    {
      id: '1',
      name: 'Child - 1',
    },
    {
      id: '3',
      name: 'Child - 3',
      children: [
        {
          id: '4',
          name: 'Child - 4',
        },
      ],
    },
],

我不想显示根父节点

Answer 1

我一直在寻找相同的解决方案，但没有找到，所以我创建了一个。

请注意，要取消选择，您应该添加父节点。

请查看我的工作示例：使用 MUI 库的工作示例