Динамическая высота с бесконечной прокруткой (реагирует на виртуализацию)

Question

Я использую "реагировать на виртуализацию", чтобы сделать бесконечный список прокрутки.

Однако у меня возникли проблемы с отображением 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 файлы здесь.