小编ibr*_*rin的帖子

具有反应虚拟化和新CellMeasurer的动态行高

我正在使用react-virualized 9与Autosizer,List和CellMeasurer组件.我需要在列表数据发生变化时更新行高.看来,自从版本9中支持React Fiber的更改以来,CellMeasurer的唯一公共方法现在是measure().大多数示例使用以前的resetMeasurementForRow()方法.当前的CellMeasurer doc似乎没有关于新公共方法的任何信息.不确定我是否忽略了某些东西,但感谢任何帮助.

const cache = new CellMeasurerCache({
  defaultHeight: 60,
  fixedWidth: true
});

<AutoSizer>
  {({ width, height }) => (
    <List
      deferredMeasurementCache={cache}
      height={height}
      ref={element => { this.list = element; }}
      rowCount={list.length}
      rowHeight={cache.rowHeight}
      rowRenderer={this.rowRenderer}
      width={width}
    />
  )}
</AutoSizer>

rowRenderer({ index, key, parent, style }) {
  return (
    <CellMeasurer
      cache={cache}
      columnIndex={0}
      key={key}
      overscanRowCount={10}
      parent={parent}
      ref={element => { this.cellMeasurer = element; }}
      rowIndex={index}
    >
      {({ measure }) => {
        this.measure = measure.bind(this);

        return <MyList index={index} data={list[index]} style={style} />;
      }}
    </CellMeasurer> …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-virtualized

15
推荐指数
1
解决办法
1万
查看次数

标签 统计

javascript ×1

react-virtualized ×1

reactjs ×1