(Это не полный ответ, но он позволяет шагу анимации работать так, как задумано. Учитывая достаточно времени, я думаю, что это может сработать полностью. Пожалуйста, смотрите мои комментарии в конце для получения дополнительной информации.)
В компоненте List есть возможность передать другой cellRangeRenderer.Это cellRangeRenderer - это то, что отвечает за генерацию объекта style, который присоединен к каждой отдельной ячейке.По умолчанию cellRangeRenderer использует абсолютное позиционирование для достижения этой цели.Я создал модифицированный cellRangeRenderer, который на самом деле ничего не устанавливает в объекте style, а скорее создает контейнер для ячеек.Контейнер использует абсолютное позиционирование, чтобы показать ячейки, где они должны быть относительно полосы прокрутки, но внутри контейнера каждая ячейка просто отображается как есть.
import React from 'react'
/**
* Default implementation of cellRangeRenderer used by Grid.
* This renderer supports cell-caching while the user is scrolling.
*/
export default function cellRangeRenderer({
cellCache,
cellRenderer,
columnSizeAndPositionManager,
columnStartIndex,
columnStopIndex,
deferredMeasurementCache,
horizontalOffsetAdjustment,
isScrolling,
isScrollingOptOut,
parent, // Grid (or List or Table)
rowSizeAndPositionManager,
rowStartIndex,
rowStopIndex,
styleCache,
verticalOffsetAdjustment,
visibleColumnIndices,
visibleRowIndices,
}) {
const renderedCells = [];
// Browsers have native size limits for elements (eg Chrome 33M pixels, IE 1.5M pixes).
// User cannot scroll beyond these size limitations.
// In order to work around this, ScalingCellSizeAndPositionManager compresses offsets.
// We should never cache styles for compressed offsets though as this can lead to bugs.
// See issue #576 for more.
const areOffsetsAdjusted = columnSizeAndPositionManager.areOffsetsAdjusted() || rowSizeAndPositionManager.areOffsetsAdjusted();
const canCacheStyle = !isScrolling && !areOffsetsAdjusted;
let styledBuffer = false
let bufferStyle, containerStyle
for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
const rowDatum = rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex);
for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
const columnDatum = columnSizeAndPositionManager.getSizeAndPositionOfCell(columnIndex);
const isVisible = columnIndex >= visibleColumnIndices.start && columnIndex <= visibleColumnIndices.stop && rowIndex >= visibleRowIndices.start && rowIndex <= visibleRowIndices.stop;
const key = `${rowIndex}-${columnIndex}`;
let style;
// this is the part that bugs out when react-virtualized re-renders part of the what's-showing-now list, rather than the entire what's-showing-now list
// I'm just grabbing the first cell and assuming it's coordinates are the top of the what's-showing-now list
if (!styledBuffer) {
styledBuffer = true
bufferStyle = {
position: 'absolute',
top: 0,
left: 0,
height: rowDatum.offset + verticalOffsetAdjustment,
width: columnDatum.offset + horizontalOffsetAdjustment,
}
containerStyle = {
position: 'absolute',
top: rowDatum.offset + verticalOffsetAdjustment,
left: columnDatum.offset + horizontalOffsetAdjustment,
height: 'auto',
width: 'auto',
}
}
// Cache style objects so shallow-compare doesn't re-render unnecessarily.
if (canCacheStyle && styleCache[key]) {
style = styleCache[key];
} else if (deferredMeasurementCache && !deferredMeasurementCache.has(rowIndex, columnIndex)) {
// In deferred mode, cells will be initially rendered before we know their size.
// Don't interfere with CellMeasurer's measurements by setting an invalid size.
// Position not-yet-measured cells at top/left 0,0,
// And give them width/height of 'auto' so they can grow larger than the parent Grid if necessary.
// Positioning them further to the right/bottom influences their measured size.
style = {
height: 'auto',
left: 0,
position: 'absolute',
top: 0,
width: 'auto'
};
} else {
// I'd go with a completely empty object, but that breaks other parts of react-virtualized that rely, at least, on 'width' being defined
style = {
height: 'auto',
width: 'auto',
}
styleCache[key] = style;
}
const cellRendererParams = {
columnIndex,
isScrolling,
isVisible,
key,
parent,
rowIndex,
style
};
let renderedCell;
// Avoid re-creating cells while scrolling.
// This can lead to the same cell being created many times and can cause performance issues for "heavy" cells.
// If a scroll is in progress- cache and reuse cells.
// This cache will be thrown away once scrolling completes.
// However if we are scaling scroll positions and sizes, we should also avoid caching.
// This is because the offset changes slightly as scroll position changes and caching leads to stale values.
// For more info refer to issue #395
//
// If isScrollingOptOut is specified, we always cache cells.
// For more info refer to issue #1028
if ((isScrollingOptOut || isScrolling) && !horizontalOffsetAdjustment && !verticalOffsetAdjustment) {
if (!cellCache[key]) {
cellCache[key] = cellRenderer(cellRendererParams);
}
renderedCell = cellCache[key];
// If the user is no longer scrolling, don't cache cells.
// This makes dynamic cell content difficult for users and would also lead to a heavier memory footprint.
} else {
renderedCell = cellRenderer(cellRendererParams);
}
if (renderedCell === null || renderedCell === false) {
continue;
}
if (process.env.NODE_ENV !== 'production') {
warnAboutMissingStyle(parent, renderedCell);
}
renderedCells.push(renderedCell);
}
}
// This is where the new "magic" happens
return [(
<div id="0-buffer-at-the-top" key="0-buffer-at-the-top" style={bufferStyle} />
), (
<div id="0-container-at-the-top" key="0-container-at-the-top" style={containerStyle}>
{renderedCells}
</div>
)];
}
function warnAboutMissingStyle(parent, renderedCellParam) {
let renderedCell = renderedCellParam
if (process.env.NODE_ENV !== 'production') {
if (renderedCell) {
// If the direct child is a CellMeasurer, then we should check its child
// See issue #611
if (renderedCell.type && renderedCell.type.__internalCellMeasurerFlag) {
renderedCell = renderedCell.props.children;
}
if (renderedCell && renderedCell.props && renderedCell.props.style === undefined && parent.__warnedAboutMissingStyle !== true) {
parent.__warnedAboutMissingStyle = true;
console.warn('Rendered cell should include style property for positioning.');
}
}
}
}
Этот код начал свою жизнь каккопия того, что распространяется в пакете npm (чтобы немного обойти этап компиляции babel).Он имеет, по крайней мере, следующие проблемы:
- Он должен использоваться в списке, а не в сетке.Сетка потребует, чтобы ячейки были правильно размещены в сетке (Grid Material-UI, а не Grid, не реагирующей виртуализированной), а не просто выброшены туда.быть вызванным для подразделов списка, а не для всего визуализируемого фрагмента (исправление этого было за пределами временного интервала, который мне был выделен для попытки выполнить это исправление).Этот новый
cellRangeRenderer будет работать примерно на 90% корректно как есть, если бы эта проблема была решена. - Поскольку вы можете развернуть строку, а затем прокрутить, размер строки все еще нуждается в
CellMeasurer для вычисления высоты.Поскольку я не применяю высоту к каждой отдельной ячейке, нам нужно пересчитать «верхнюю» высоту контейнера, используя высоты немного более умным способом.Это нарушается только в том случае, если вы полностью прокрутите раздел, в котором отображается расширенная панель.Возможно, что простого применения высоты к объекту style будет достаточно, но это не проверено.Изменить: Вам все равно придется отложить вызов на measure, как подразумевает ваш ответ. - Переход к определенной ячейке не был проверен и может работать, а может и не работать.