Как обернуть материал-ui ListItem в реакционно-виртуализированном автозагрузчике

Question

Я использовал компоненты материала-ui и список элементов ListItem. В частности, я использовал функциональность вложенных элементов. См. http://www.material-ui.com/#/components/list примерно на полпути вниз по странице вы увидите Вложенный список. Дело в том, что material-ui заботится о проблемах «вложенности», таких как отступы, а также стрелка expand/contract.

Как только я добавил много элементов, я понял, что список очень медленный. Поэтому я случайно столкнулся с AutoSizer от виртуализованного взаимодействия. Проблема в том, что в викторизованной реакции мой код должен будет снабжать функцию rowRenderer для каждой строки. Я не хочу потерять встроенную материальную функциональность, определяющую отступы для вложенных элементов. Тем не менее, используя AutoSizer, мне кажется, что мой код должен будет выполнить индивидуальную работу, чтобы выяснить отступ. Кроме того, мой код должен был использовать стрелку expand/contract. В настоящее время он поставляется бесплатно с List-List List ListItem.

Любые советы или предложения?

Спасибо

Answer 1

Похоже ListItem компонент проп называется nestedLevel. Принимая пример, приведенный в material-ui документации, попробуйте следующее:

... 
<ListItem primaryText="Drafts" nestedLevel={3} leftIcon={<ContentDrafts />}/> 
... 

Это должно привести к:

Но помните о предупреждении:

Это свойство автоматически управляется, поэтому модифицируйте на свой страх и риск.