Есть ли способ раскрыть свойства настраиваемого элемента, полученные асинхронно с помощью MUI - RichTreeView внутри настраиваемого элемента TreeItem?
Например, как получить customProperty1 и customProperty2 внутри CustomTreeItem? Console.log для реквизита не показывает ничего, кроме свойств по умолчанию, таких как идентификатор, метка и т. д.
Я выбрал RichTreeView, потому что мой набор данных будет огромным.
const ITEMS = [
{
id: '1',
label: 'label1',
customProperty1: false,
customProperty2: 'ADD',
},
const CustomTreeItem = forwardRef((props, ref) => {
const { id, itemId, label, disabled, children, ...other } = props;
const { getRootProps, getContentProps, getIconContainerProps, getLabelProps, getGroupTransitionProps, status } = useTreeItem2({
id,
itemId,
children,
label,
disabled,
rootRef: ref,
});
console.info('props', props);
return (
<TreeItem2Provider itemId = {itemId}>
<TreeItem2Root {...getRootProps(other)}>
<CustomTreeItemContent {...getContentProps()}>
<Box sx = {{ flexGrow: 1 }}>
<Stack direction = "row" alignItems = "center">
<TreeItem2IconContainer {...getIconContainerProps()}>
<TreeItem2Icon status = {status} />
</TreeItem2IconContainer>
<TreeItem2Label {...getLabelProps()} />
</Stack>
{!children && (
<Stack direction = "row" justifyContent = "flex-start" sx = {{ pl: 2, ml: 2, mt: 1, backgroundColor: '#2F3B5F', borderRadius: 10, px: 2, my: 1 }}>
All spare parts (xxxxx)
<Stack sx = {{ ml: 'auto' }}>(folder icon here)</Stack>
</Stack>
)}
</Box>
</CustomTreeItemContent>
{children && <TreeItem2GroupTransition {...getGroupTransitionProps()} />}
</TreeItem2Root>
</TreeItem2Provider>
);
});
<RichTreeView
aria-label = "icon expansion"
sx = {{ position: 'relative' }}
items = {ITEMS}
slots = {{ item: CustomTreeItem }}
/>
Обновлено: возможным решением было бы добавить этот код внутри CustomTreeItem
, но я боюсь, что это замедлит рендеринг в огромных наборах данных.
console.info('customProperty1', ITEMS.find((item) => item.id === itemId)?.customProperty1);
Окончательное решение — использовать объект publicAPI
, возвращаемый useTreeItem2, у которого есть метод getItem.
пример
const CustomTreeItem = forwardRef((props, ref) => {
const { id, itemId, label, disabled, children, ...other } = props;
const { getRootProps, getContentProps, getIconContainerProps, getLabelProps, getGroupTransitionProps, publicAPI, status } = useTreeItem2({
id,
itemId,
children,
label,
disabled,
rootRef: ref,
});
console.info('items=>', publicAPI.getItem(itemId));
return (
<TreeItem2Provider itemId = {itemId}>
<TreeItem2Root {...getRootProps(other)}>
<CustomTreeItemContent {...getContentProps()}>
<Box sx = {{ flexGrow: 1 }}>
<Stack direction = "row" alignItems = "center">
<TreeItem2IconContainer {...getIconContainerProps()}>
<TreeItem2Icon status = {status} />
</TreeItem2IconContainer>
<TreeItem2Label {...getLabelProps()} />
</Stack>
{!children && (
<Stack direction = "row" justifyContent = "flex-start" sx = {{ pl: 2, ml: 2, mt: 1, backgroundColor: '#2F3B5F', borderRadius: 10, px: 2, my: 1 }}>
All spare parts (xxxxx)
<Stack sx = {{ ml: 'auto' }}>(folder icon here)</Stack>
</Stack>
)}
</Box>
</CustomTreeItemContent>
{children && <TreeItem2GroupTransition {...getGroupTransitionProps()} />}
</TreeItem2Root>
</TreeItem2Provider>
);
});