帶有無限滾動的動態高度（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。