如何在react-virtualized autosizer中包装material-ui ListItem

Question

我使用的是material-ui的List和ListItem组件。具体地说，我使用的是嵌套项功能。查看http://www.material-ui.com/#/components/list大约在页面的一半处，您将看到嵌套列表。重点是: material-ui负责“嵌套”问题，如缩进和扩展/收缩箭头。

一旦我添加了许多项，我意识到列表非常慢。所以我偶然发现了来自react-virtualized的AutoSizer。问题是:在react-virtualized中，我的代码需要为每一行提供一个rowRenderer函数。我不想失去内置的material-ui功能，它可以计算出嵌套项的缩进。然而，使用AutoSizer时，我的代码似乎需要进行自定义工作才能弄清楚缩进。另外，我的代码将提供扩展/收缩箭头。目前免费提供material-ui的List/ListItem。

有什么建议或建议吗？

谢谢

Answer 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} />
    );
  }
}