简单树状视图 - 项目

了解如何将简单数据添加到树状视图组件。

基础知识

import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

简单树状视图组件直接将其项目作为 JSX 子项接收。

项目标识符

每个树状项目都必须有一个唯一的 itemId。这在内部用于识别各种模型中的项目，并在更新时跟踪它。

<SimpleTreeView>
  <TreeItem itemId="item-unique-id" {...otherItemProps} />
</SimpleTreeView>

项目标签

您必须将 label 属性传递给每个树状项目组件，如下所示

<SimpleTreeView>
  <TreeItem label="Item label" {...otherItemProps} />
</SimpleTreeView>

禁用项目

在树状项目组件上使用 disabled 属性来禁用交互和焦点

disabledItemsFocusable 属性

请注意，下面的演示还包括一个开关。这会切换 disabledItemsFocusable 属性，该属性控制是否可以聚焦禁用的树状项目。

当此属性设置为 false 时

• 使用键盘箭头键导航将不会聚焦禁用的项目，而是聚焦下一个未禁用的项目。
• 键入禁用项目标签的第一个字符不会将焦点移动到它。
• 鼠标或键盘交互不会展开/折叠禁用的项目。
• 鼠标或键盘交互不会选择禁用的项目。
• Shift + 箭头键将跳过禁用的项目，而是选择下一个未禁用的项目。
• 程序化焦点不会聚焦禁用的项目。

当它设置为 true 时

• 使用键盘箭头键导航将聚焦禁用的项目。
• 键入禁用项目标签的第一个字符会将焦点移动到它。
• 鼠标或键盘交互不会展开/折叠禁用的项目。
• 鼠标或键盘交互不会选择禁用的项目。
• Shift + 箭头键不会跳过禁用的项目，但不会选择禁用的项目。
• 程序化焦点将聚焦禁用的项目。

跟踪项目点击

使用 onItemClick 属性来跟踪点击的项目

命令式 API

通过 ID 获取项目的 DOM 元素

使用 getItemDOMElement API 方法通过其 ID 获取项目的 DOM 元素。

const itemElement = apiRef.current.getItemDOMElement(
  // The id of the item to get the DOM element of
  itemId,
);

API

请参阅下面的文档，以获得此处提及的组件的所有可用属性和类的完整参考。

• <SimpleTreeView />
• <TreeItem />