富文本树形视图 - 项目

将数据传递到你的树形视图。

基本用法

项目可以通过 items 属性定义，该属性接收一个对象数组。

项目标识符

每个项目必须有一个唯一的标识符。

此标识符在内部用于在各种模型中标识项目，并在更新中跟踪项目。

默认情况下，富文本树形视图组件会在数据集中查找名为 id 的属性来获取该标识符

const ITEMS = [{ id: 'tree-view-community' }];

<RichTreeView items={ITEMS} />;

如果项目的标识符不是 id，那么你需要使用 getItemId 属性来告诉富文本树形视图组件它的位置。

以下演示展示了如何使用 getItemId 从名为 internalId 的属性中获取唯一标识符

const ITEMS = [{ internalId: 'tree-view-community' }];

function getItemId(item) {
  return item.internalId;
}

<RichTreeView items={ITEMS} getItemId={getItemId} />;

项目标签

每个项目必须有一个标签，该标签不需要是唯一的。

默认情况下，富文本树形视图组件会在数据集中查找名为 label 的属性来获取该标签

const ITEMS = [{ label: '@mui/x-tree-view' }];

<RichTreeView items={ITEMS} />;

如果项目的标签不是 label，那么你需要使用 getItemLabel 属性来告诉富文本树形视图组件它的位置

以下演示展示了如何使用 getItemLabel 从名为 name 的属性中获取标签

const ITEMS = [{ name: '@mui/x-tree-view' }];

function getItemLabel(item) {
  return item.name;
}

<RichTreeView items={ITEMS} getItemLabel={getItemLabel} />;

禁用项目

使用富文本树形视图上的 isItemDisabled 属性来禁用树形视图项的交互和焦点

function isItemDisabled(item) {
  return item.disabled ?? false;
}

<RichTreeView isItemDisabled={isItemDisabled} />;

聚焦禁用项目

使用 disabledItemsFocusable 属性来控制是否可以聚焦禁用的树形视图项。

当此属性设置为 false 时

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

当它设置为 true 时

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

跟踪项目点击

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

命令式 API

通过 ID 获取项目

使用 getItem API 方法通过其 ID 获取项目。

const item = apiRef.current.getItem(
  // The id of the item to retrieve
  itemId,
);

通过 ID 获取项目的 DOM 元素

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

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

获取当前项目树

使用 getItemTree API 方法获取当前项目树。

const itemTree = apiRef.current.getItemTree();

通过 ID 获取项目的子项

使用 getItemOrderedChildrenIds API 方法通过其 ID 获取项目的子项。

const childrenIds = apiRef.current.getItemOrderedChildrenIds(
  // The id of the item to retrieve the children from
  itemId,
);

API

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

• <RichTreeView />
• <TreeItem />