RichTreeViewAPI

React RichTreeView 组件的 API 参考文档。了解此导出的模块的 props、CSS 和其他 API。

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

导入

import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
// or
import { RichTreeView } from '@mui/x-tree-view';

通过阅读本关于最小化 bundle 大小的指南，了解两者之间的区别。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
apiRef	{ current?: { focusItem: func, getItem: func, getItemDOMElement: func, getItemOrderedChildrenIds: func, getItemTree: func, selectItem: func, setItemExpansion: func, updateItemLabel: func } }	-	允许树状视图操作的 ref 对象。可以使用 `useTreeViewApiRef()` 实例化。
checkboxSelection	bool	false	如果为 `true`，树状视图将在其标签的左侧渲染一个复选框，允许选择它。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。
defaultExpandedItems	Array<string>	[]	展开的项目 ID。当项目的展开状态不受控制时使用。
defaultSelectedItems	any	[]	选定的项目 ID。（非受控）当 `multiSelect` 为 true 时，这将接受一个字符串数组；当为 false（默认）时，接受一个字符串。
disabledItemsFocusable	bool	false	如果为 `true`，将允许聚焦禁用项目。
disableSelection	bool	false	如果为 `true`，则禁用选择。
expandedItems	Array<string>	-	展开的项目 ID。当项目的展开状态受控制时使用。
expansionTrigger	'content' \| 'iconContainer'	'content'	单击时触发项目展开的 slot。
experimentalFeatures	{ indentationAtItemLevel?: bool, labelEditing?: bool }	-	不稳定的功能，可能会引入重大更改。对于每个功能，如果标志未显式设置为 `true`，则该功能将被完全禁用，并且任何属性/方法调用都不会产生任何效果。
getItemId	func	(item) => item.id	用于确定给定项目的 ID。签名:`function(item: R) => string` `item` 要检查的项目。返回: 项目的 ID。
getItemLabel	func	(item) => item.label	用于确定给定项目的字符串标签。签名:`function(item: R) => string` `item` 要检查的项目。返回: 项目的标签。
id	string	-	此 prop 用于帮助实现无障碍逻辑。如果您不提供此 prop。它会回退到随机生成的 ID。
isItemDisabled	func	-	用于确定是否应禁用给定项目。签名:`function(item: R) => boolean` `item` 要检查的项目。返回: 如果应禁用该项目，则返回 `true`。
isItemEditable	func \| bool	-	确定给定项目是否可编辑。确保还启用 `labelEditing` 实验性功能：`<RichTreeViewPro experimentalFeatures={{ labelEditing: true }} />`。默认情况下，项目不可编辑。
itemChildrenIndentation	number \| string	12px	项目及其子项之间的水平缩进。示例：24、"24px"、"2rem"、"2em"。
multiSelect	bool	false	如果为 `true`，`ctrl` 和 `shift` 将触发多选。
onExpandedItemsChange	func	-	当树项目展开/折叠时触发的回调。签名:`function(event: React.SyntheticEvent, itemIds: array) => void` `event` 触发更改的 DOM 事件。 `itemIds` 展开的项目的 ID。
onItemClick	func	-	当单击给定树项目的 `content` slot 时触发的回调。签名:`function(event: React.MouseEvent, itemId: string) => void` `event` 触发更改的 DOM 事件。 `itemId` 聚焦项目的 ID。
onItemExpansionToggle	func	-	当树项目展开或折叠时触发的回调。签名:`function(event: React.SyntheticEvent, itemId: array, isExpanded: array) => void` `event` 触发更改的 DOM 事件。 `itemId` 修改的项目的 itemId。 `isExpanded` 如果项目刚刚展开，则为 `true`；如果刚刚折叠，则为 `false`。
onItemFocus	func	-	当给定树项目获得焦点时触发的回调。签名:`function(event: React.SyntheticEvent \| null, itemId: string) => void` `event` 触发更改的 DOM 事件。警告：这是一个通用事件，而不是焦点事件。 `itemId` 聚焦项目的 ID。
onItemLabelChange	func	-	当项目的标签更改时触发的回调。签名:`function(itemId: TreeViewItemId, newLabel: string) => void` `itemId` 编辑的项目的 ID。 `newLabel` 项目的新标签。
onItemSelectionToggle	func	-	当树项目被选中或取消选中时触发的回调。签名:`function(event: React.SyntheticEvent, itemId: array, isSelected: array) => void` `event` 触发更改的 DOM 事件。 `itemId` 修改的项目的 itemId。 `isSelected` 如果项目刚刚被选中，则为 `true`；如果刚刚被取消选中，则为 `false`。
onSelectedItemsChange	func	-	当树项目被选中/取消选中时触发的回调。签名:`function(event: React.SyntheticEvent, itemIds: Array \| string) => void` `event` 触发更改的 DOM 事件。 `itemIds` 选定项目的 ID。当 `multiSelect` 为 `true` 时，这是一个字符串数组；当为 false（默认）时，是一个字符串。
selectedItems	any	-	选定的项目 ID。（受控）当 `multiSelect` 为 true 时，这将接受一个字符串数组；当为 false（默认）时，接受一个字符串。
slotProps	object	{}	用于每个组件 slot 的 props。
slots	object	{}	可覆盖的组件 slot。有关更多详细信息，请参阅下面的 Slots API。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参阅 `sx` 页面。

ref 被转发到根元素。

主题默认 Props

您可以使用 MuiRichTreeView 通过主题更改此组件的默认 props。

Slots

Slot 名称	类名	默认组件	描述
root	.MuiRichTreeView-root	`RichTreeViewRoot`	在根目录渲染的元素。
item		`TreeItem.`	项目的自定义组件。
collapseIcon			用于折叠项目的默认图标。
expandIcon			用于展开项目的默认图标。
endIcon			显示在末端项目旁边的默认图标。这应用于所有树项目，并且可以被 TreeItem `icon` slot prop 覆盖。

源代码

如果您在此页面中没有找到信息，请考虑查看组件的实现以获取更多详细信息。