材质-UI树可编辑项目

Question

我正在使用 Material-UI 库中的 RichTreeView 组件，并希望创建一个可编辑的树：因此，当用户单击位于弹出的每个项目下拉列表之后的特定按钮时。 我尝试以某种方式返回项目内的 jsx，但没有成功。

<RichTreeView items={MUI_X_PRODUCTS} />

我尝试了多种方法，但都不像以前的版本那样有效。例如：

function getItemLabel(item: any) {
//return item.label + "  +X ";
return (
<div>
<Button size="small" variant="contained" style= {{ marginLeft: 8 }}>
    Action
  </Button>
</div>
);
}

我也尝试使用 items 数组，但收到消息说那里不允许使用 jsx。 https://codesandbox.io/p/sandbox/editable-tree-7ksrx8?file=%2Fsrc%2FDemo.tsx%3A45%2C5

谢谢。

Answer 1

您可以创建自定义 TreeItem 组件：

import { TreeItem, TreeItemProps } from "@mui/x-tree-view";

const CustomTreeItem = ({ label, ...props }: TreeItemProps) => {
  const handleEditClick = () => {
    // TODO: Implement editing logic
    console.log(`Editing item: ${props.itemId}`);
  };

  return (
    <TreeItem
      label={
        <Stack direction="row" justifyContent="space-between">
          {label}
          {!props.children && <button onClick={handleEditClick}>Edit</button>}
        </Stack>
      }
      {...props}
    />
  );
};

并在物品槽中使用它：

<RichTreeView items={MUI_X_PRODUCTS} slots={{ item: CustomTreeItem }} />

我使用了

!props.children

条件，假设您只有 1 层嵌套元素，并且不希望父级可编辑，但您肯定可以根据需要进行改进。