带有无限滚动的动态高度（react-virtualized）

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 component的用途。你可以看到一个demo of it measuring dynamic heights here。演示的源代码是*.example.js files here。