Как раскрыть свойства пользовательского элемента с помощью MUI v5 – RichTreeView?

Есть ли способ раскрыть свойства настраиваемого элемента, полученные асинхронно с помощью 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);
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
246
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Окончательное решение — использовать объект 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>
   );
});

Другие вопросы по теме