javascript - 如何测量反应虚拟化列表中的行高

Question

我有点不确定如何使用react-virtualized来实现 List 的动态高度。

我有一个组件如下：

import { List } from 'react-virtualized';
<List
    height={400}
    rowCount={_.size(messages)}
    rowHeight={(index) => {
        return 100; // This needs to measure the dom.
    }}
    rowRenderer={({ key, index, style }) => <Message style={style} {...messages[index]} />}}
    width={300}
/>

我已经按照文档查看了使用CellMeasurer，该文档说它可以与 List 组件一起使用，但我不知道这个示例实际上是如何工作的......

我也试图弄清楚它是如何在演示代码中实现的，但也走到了死胡同。

有人可以帮助我如何测量 DOM 以动态获取每个项目的高度。

Answer 1

抱歉，您发现文档令人困惑。我将尝试更新它们以使其更清晰。希望这会有所帮助：

import { CellMeasurer, List } from 'react-virtualized';

function renderList (listProps) {
  return (
    <CellMeasurer
      cellRenderer={
        // CellMeasurer expects to work with a Grid
        // But your rowRenderer was written for a List
        // The only difference is the named parameter they
        // So map the Grid params (eg rowIndex) to List params (eg index)
        ({ rowIndex, ...rest }) => listProps.cellRenderer({ index: rowIndex, ...rest })
      }
      columnCount={1}
      rowCount={listProps.rowCount}
      width={listProps.width}
    >
      {({ getRowHeight, setRef }) => (
        <List
          {...listProps}
          ref={setRef}
          rowHeight={getRowHeight}
        />
      )}
    </CellMeasurer>
  )
}

这里还有这个组件的演示，展示了它是如何使用的。