Я пытаюсь использовать React Virtualized List вместе с AutoSizer. Это моя проблема: я установил высоту списка на 200 пикселей, а затем я вижу в инспекторе Chrome, что высота равна 200, и это нормально, но переполненный контент виден, хотя я вижу, что стиль css ReatVirtualized_Grid_innerScrollContainer сидят до переполнения: скрытые. Проблема вызывает отсутствие вертикальной полосы прокрутки и отображение большой части данных, но не всех. Таким образом, он отображает намного больше данных, чем указанная высота, на которой я сидел. Это почему?
Это мой код:
import Row from './Row';
...
render () {
return (
<AutoSizer disableHeight>
{({ width })} => (
<List
height = {200}
width = {width}
rowCount = {this.props.list.size}
rowRenderer = {this.rowRenderer}
rowHeight = {24}
/>
)}
</AutoSizer>
);
}
rowRenderer = ({ key, style, index, parent }) => {
const row = this.props.list.get(index);
return (
<Row
row = {row}
style = {style}
rowIndex = {index}
parent = {parent}
columnIndex = {0}
/>
);
}






Проблема заключалась в том, что где-то в проекте были переопределены два переполнения:
Таким образом, решение заключалось в том, чтобы охватить этот CSS, который переопределяет переполнение, чтобы указать только там, где это было необходимо, а не добавлять его глобально, чтобы это повлияло на все компоненты React Virtualized List.
Мне пришлось отключить свойство CSS will-change, чтобы отображалась полоса прокрутки с помощью виртуализированной реакции.
.ReactVirtualized__Grid.ReactVirtualized__List {
will-change: unset !important;
}