Jak owinąć materiał-ui ListItem w zwirtualizowanym automatycznym autosizerze

Question

Używałem komponentów List-i-pliki z listy material-ui. W szczególności używałem funkcji zagnieżdżonych elementów. Zobacz http://www.material-ui.com/#/components/list około połowy strony, na której zobaczysz listę zagnieżdżoną. Chodzi o to: material-ui dba o kwestie "zagnieżdżania", takie jak wcięcia, a także strzałkę rozwijania/kontraktu.

Po dodaniu wielu przedmiotów zdałem sobie sprawę, że lista jest bardzo powolna. Tak więc miałem okazję przekonwertować AutoSizer-zwirtualizowany. Problem polega na tym, że w zwirtualizowanej reakcji mój kod musiałby dostarczyć funkcję rowRenderer dla każdego wiersza. Nie chcę stracić wbudowanej funkcji material-ui, która wykrywa wcięcie dla zagnieżdżonych przedmiotów. Jednak przy użyciu AutoSizer wydaje się, że mój kod musiałby wykonać niestandardową pracę, aby znaleźć wcięcie. Również mój kod nie byłby dostępny dla strzałki expand/contract. Obecnie jest dostępny za darmo z listą-listami Material-ui.

Wszelkie wskazówki lub sugestie?

Dziękuję

Answer 1

Wygląda ListItem komponent został prop nazywa nestedLevel. Biorąc przykład przewidzianej w material-ui docs, spróbuj tego:

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

To powinno prowadzić do:

jednak pamiętać o ostrzeżeniu:

Ta właściwość jest automatycznie zarządzany, więc zmodyfikuj na własne ryzyko.