javascript Material-UI和React-virtualized

Posted 2021-05-03

import React, { Component } from 'react';

import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import FolderIcon from '@material-ui/icons/Folder';

import { AutoSizer, List as VirtualList, CellMeasurer, CellMeasurerCache } from 'react-virtualized';

class MyList extends Component {
  cache = new CellMeasurerCache({
    fixedWidth: true,
    defaultHeight: 90,
  });
  state = {
    items: [...Array(10000)],
  };

  renderRow = ({ index, parent, key, style }) => (
    <CellMeasurer key={key} cache={this.cache} parent={parent} columnIndex={0} rowIndex={index}>
      <ListItem style={style} component="div" divider>
        <ListItemIcon>
          <FolderIcon />
        </ListItemIcon>
        <ListItemText
          primary={`Single-line item: ${index}`}
          // secondary={secondary ? 'Secondary text' : null}
        />
      </ListItem>
    </CellMeasurer>
  );

  renderList = () => (
    <AutoSizer>
      {({ width, height }) => (
        <VirtualList
          ref={(list) => {
            this.list = list;
          }}
          rowCount={this.state.items.length}
          width={width}
          height={height}
          deferredMeasurementCache={this.cache}
          rowHeight={this.cache.rowHeight}
          rowRenderer={this.renderRow}
          overscanRowCount={25}
          // ...moarProps
        />
      )}
    </AutoSizer>
  );

  render() {
    return <List dense={false} component={this.renderList} />;
  }
}

export default MyList;