RichTreeViewProAPI

React 富文本树视图 Pro 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

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

富文本树视图 - 排序

导入

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

阅读此关于最小化 bundle 大小的指南，了解它们之间的区别。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
apiRef	{ current?: { focusItem: func, getItem: func, getItemDOMElement: func, getItemOrderedChildrenIds: func, getItemTree: func, selectItem: func, setItemExpansion: func, updateItemLabel: func } }	-	允许树视图操作的 ref 对象。可以使用 `useTreeViewApiRef()` 实例化。
canMoveItemToNewPosition	func	-	用于确定给定项目是否可以移动到新的位置。签名:`function(params: object, params.itemId: string, params.oldPosition: TreeViewItemReorderPosition, params.newPosition: TreeViewItemReorderPosition) => boolean` `params` 描述项目重新排序的 params。 `params.itemId` 要移动到新位置的项目的 ID。 `params.oldPosition` 项目的旧位置。 `params.newPosition` 项目的新位置。返回: 如果项目可以移动到新位置，则返回 `true`。
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, itemsReordering?: 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 }} />`。默认情况下，项目不可编辑。
isItemReorderable	func	() => true	用于确定给定项目是否可以重新排序。签名:`function(itemId: string) => boolean` `itemId` 要检查的项目的 ID。返回: 如果项目可以重新排序，则返回 `true`。
itemChildrenIndentation	number \| string	12px	项目及其子项之间的水平缩进。示例：24, "24px", "2rem", "2em"。
itemsReordering	bool	false	如果为 `true`，则启用项目重新排序。确保同时启用 `itemsReordering` 实验性功能：`<RichTreeViewPro experimentalFeatures={{ itemsReordering: true }} itemsReordering />`。
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` 项目的新标签。
onItemPositionChange	func	-	当树视图项目在树中移动时触发的回调。签名:`function(params: object, params.itemId: string, params.oldPosition: TreeViewItemReorderPosition, params.newPosition: TreeViewItemReorderPosition) => void` `params` 描述项目重新排序的 params。 `params.itemId` 被移动的项目的 ID。 `params.oldPosition` 项目的旧位置。 `params.newPosition` 项目的新位置。
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

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

Slots

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

源代码

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