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

【问题标题】：How to wrap material-ui ListItem in react-virtualized autosizer如何在 react-virtualized autosizer 中包装 material-ui ListItem
【发布时间】：2017-04-29 00:55:31
【问题描述】：

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

有什么提示或建议吗？

谢谢

【问题讨论】：

标签： list material-ui react-virtualized

【解决方案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} />
    );
  }
}

【讨论】：

你怎么知道 rowHeight 正好是 30？
@Bender 这取决于字体大小，我认为默认字体大小是 16pt，所以 30 像素会稍微大一点。