如何在反应虚拟化的自动化器中包裹材料-UI ListItem

Question

i使用了材料-UI的列表和ListItem组件。具体来说，我正在使用嵌套项目功能。请参阅http://www.material-ui.com/#/components/list在页面下方，您会看到嵌套列表。关键是：材料 - UI处理诸如凹痕和扩展/合同箭头之类的"嵌套"问题。

添加了许多项目后，我意识到列表非常慢。因此，我从反应虚拟化的自动驾驶仪上偶然发现。问题是：在反应虚拟化中，我的代码需要为每行提供RowRenderer函数。我不想丢失内置的材料UI功能，该功能可以弄清楚嵌套物品的凹痕。但是，使用自动摄像器似乎需要进行自定义工作以找出凹痕。另外，我的代码将不提供扩展/合同箭头。目前，它可以免费提供材料 - UI的列表/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} />
    );
  }
}