Учет динамического верхнего элемента в React Virtualized `Grid`

Question

У меня есть коллекция фотографий, в которой используется элемент Grid React Virtualized.

Мы разработали индикатор для загрузки фотографий. Это скрывает и показывает динамически и отображается через cellRangeRenderer за эти документы .

Сложная часть состоит в том, чтобы остальные элементы Grid учитывали дополнительную высоту, добавленную этим новым элементом. Подход, который используется в настоящее время, заключается в добавлении высоты этого элемента к style.top каждого элемента, отображаемого в cellRenderer.

const adjustedTopOffset = style.top + heightOfTopElement;

Вышеуказанный расчет сделан для каждого элемента. Это правильно помещает все элементы в соответствующие смещения. Однако высота сетки не корректируется для пересчета верхних смещений.

Следствием этого является то, что нижняя часть Grid обрезается на установленную верхнюю величину.

Как правильно учесть скорректированные верхние смещения? Вызов recomputeGridSize, похоже, не делает этого.

Является ли корректировка верхнего смещения в cellRenderer правильным подходом для учета дополнительного верхнего элемента? Я поясню, что это не фиксированный элемент, а элемент, который нужно прокручивать с помощью Grid, как и другие элементы.

Answer 1

Учитывая, что ваша высота ячеек фиксирована, вы должны иметь возможность переопределить стиль по умолчанию height style , используя containerStyle prop, например:

let containerStyle;
if (isTopElementVisible) {
  containerStyle = {
    height: rowHeight * rowCount + heightOfTopElement,
    maxHeight: rowHeight * rowCount + heightOfTopElement,
  };
}