無限のスクロールを伴う動的な高さ（反応仮想化）

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です。