Question

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

一旦我添加了很多项目，我意识到列表非常慢。所以我偶然发现了AutoSizer的反应虚拟化。问题是：在反应虚拟化中，我的代码需要为每一行提供rowRenderer函数。我不想丢失内置的材料-ui功能，可以找出嵌套项目的缩进。然而，使用AutoSizer似乎我的代码需要做自定义工作来找出缩进。我的代码也将提供扩展/合同箭头。目前它是免费提供的材料-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} />
    );
  }
}

如何在react-virtualized autosizer

1 个答案: