如何使用 MUI v5 - RichTreeView 公开自定义 Item 属性？

Question

是否有任何方法可以公开与自定义树项内的 MUI - RichTreeView 异步接收的自定义项属性？

例如，如何获取CustomTreeItem内的customProperty1 & customProperty2？ Console.log to props 除了 id、label 等默认属性外什么也不显示。

我选择了 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.log('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.log('customProperty1', ITEMS.find((item) => item.id === itemId)?.customProperty1);

Answer 1

最终的解决方案是使用 useTreeItem2 返回的

publicAPI

对象，该对象具有 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.log('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>
   );
});