無限滾動的動態高度（反應虛擬化）

Question

我正在使用'react-virtualized'渲染無限滾動列表。

但是，我無法動態呈現rowHeight 。 我嘗試了一下，但這只是桌面上的事，感覺不對。

我嘗試按照示例進行操作，但沒有成功。

計算真實行高的正確方法是什么？

它應該對移動響應。

這是一個例子：

https://codesandbox.io/s/ADARgvlxB

class App extends React.Component {

  render() {

    return (
      <div>

        <AutoSizer>
        {({ height, width }) => (
        <List
          height={600}
          width={width}
          rowCount={foo.length}
          rowHeight={({ index }) => {
            const x = foo[index];
            if (x.name.length < 10) { return 20; } 
            else if (x.name.length > 9) { return 40;}
          }}
          rowRenderer={({ index, style }) => {
            const x = foo[index];
            return (
              <div key={index} style={style}>
                {x.name}
              </div>
            );
          }}
        />
        )}
        </AutoSizer>
      </div>
    );
  }
}

Answer 1

計算真實行高的正確方法是什么？

這就是反應虛擬化CellMeasurer組件的用途。 您可以在此處看到有關測量動態高度的演示 。 該演示的源代碼是此處的*.example.js文件 。