Question

给定每行中具有可变内容的反应虚拟化List，需要通过rowHeight函数计算DOM高度 - 但是因为在渲染行之前调用它，所以我不确定如何实际获取行高度。

动态列表行高的示例基本上取消了列表项的道具中的预定义数字，但没有帮助。

我认为我想要做的是将页面上的行渲染为默认高度，然后获取DOM上的溢出高度并将其设置为行高。如何挂钩afterRowRender函数或类似的东西？我想性能会受到影响，所以也许有一种更好的方法可以解决这个问题。

Answer 1

查看CellMeasurer上的文档。您可以在行动here中看到它。

基本上你会找到这样的东西：

import React from 'react';
import { CellMeasurer, CellMeasurerCache, Grid } from 'react-virtualized';

const cache = new CellMeasurerCache({
  fixedWidth: true,
  minHeight: 50,
});

function rowRenderer ({ index, isScrolling, key, parent, style }) {
  const source // This comes from your list data

  return (
    <CellMeasurer
      cache={cache}
      columnIndex={0}
      key={key}
      parent={parent}
      rowIndex={index}
    >
      {({ measure }) => (
        // 'style' attribute required to position cell (within parent List)
        <div style={style}>
          // Your content here
        </div>
      )}
    </CellMeasurer>
  );
}

function renderList (props) {
  return (
    <List
      {...props}
      deferredMeasurementCache={cache}
      rowHeight={cache.rowHeight}
      rowRenderer={rowRenderer}
    />
  );
}

我有一个<list>，包含未知DOM高度的行项

1 个答案: