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

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

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

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

Спасибо

Ответ 1

Возможно, вы захотите использовать "виртуальную" библиотеку списков, например, такую: https://github.com/bvaughn/react-virtualized.

Обычно эти библиотеки дают вам возможность создать пользовательский контейнер списка и пользовательский элемент списка.

Вот пример кода, как это сделать:

import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

// NOTE: Your import path for react-virtualized may be different if you are
//       using TypeScript or ES6/Babel or UMD modules.
import { List } from "react-virtualized";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ids: ["abc", "def", "ghi"]
    };
  }

  // the rowRenderer function is given an object with a lot more stuff
  // in it: https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md
  rowRenderer = ({ key, index, style }) => {
    const value = this.state.ids[index];
    return (
      <ListItem key={key} style={style}>
        <ListItemText>{value}</ListItemText>
      </ListItem>
    );
  }

  render() {
    return (
      <List
        height={150} width={250} rowHeight={30}
        rowCount={this.state.ids.length}
        rowRenderer={this.rowRenderer} />
    );
  }
}

Ответ 2

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

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

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

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

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