具有无限滚动的动态高度(反应虚拟化)

时间:2017-07-27 13:36:36

标签: javascript reactjs react-virtualized

我正在使用'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>
    );
  }
}

1 个答案:

答案 0 :(得分:1)

  

计算真实行高的正确方法是什么?

这就是react-virtualized CellMeasurer component的用途。你可以看到demo of it measuring dynamic heights here。演示的源代码是*.example.js files here