Javascript 我有一个行项目的DOM高度未知

给定一个react虚拟化列表，每行中都有可变内容，DOM高度需要由rowHeight函数计算——但是，由于在呈现行之前调用了该函数，因此我不确定如何实际获取行高度

给出的动态列表行高示例基本上偏离了列表项道具中的预定义数字，这没有帮助

我想我要做的是以默认高度呈现页面上的行，然后获取DOM上的溢出高度，并将其设置为行高度。如何连接到afterRowRender函数或类似的东西？我想性能会受到影响，所以也许有一种更好的方法可以做到这一点，但我没有。

查看网站上的文档。你可以在行动中看到它

基本上，您将寻找以下内容：

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}
    />
  );
}

---

您是否尝试过componentDidMount生命周期方法？似乎react虚拟化并内置了此方法-检查：使用动态行高动态行高基本上切换道具行高以使用功能。但是，正如我所说，函数在呈现行之前被调用。考虑到您是库的作者，我删除了我的答案。我很好奇为什么你会使用CellMeasurer而不是AutoSizer。AutoSizer的文档说明：；这简化了网格、表格和列表等组件的使用，这些组件需要明确的尺寸但需要固定的宽度。。。我需要列表的响应流体宽度。@据我所知，KyleRichardson的大小是实际组件的大小，而不是子行的高度。@Simon这很有道理。