15

我使用的是 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 一起免费提供。

有什么提示或建议吗？

谢谢

4

1 回答 1

2

您可能需要考虑使用像这样的“虚拟”列表库：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} />
    );
  }
}
于 2018-12-17T20:13:26.923 回答