javascript - 我有一个 <List/> ，其行项目的 DOM 高度未知

Question

给定一个每行内容可变的 react 虚拟化列表，DOM 高度需要通过 rowHeight 函数计算 - 然而，由于在渲染行之前调用该函数，我不确定如何实际计算获取行高。

针对动态列表行高给出的示例基本上超出了列表项 Prop 中的预定义数字，这没有帮助。

我想我想做的是以默认高度渲染页面上的行，然后获取 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}
    />
  );
}