基于react-sortable-hoc与react-virtualized MultiGrid实现可排序行

I've run into similar scroll jump problems when adding sorting to react-virtualized components before, so let's break down the likely causes and solutions for your MultiGrid issue:

1. Lock Scroll Anchor Before/After Sorting #

The most common reason for sudden jumps to top/bottom is that the grid loses track of its visible viewport after data reorders. Here's how to fix it:

• Before sorting, capture the anchor row that's currently visible (e.g., the first row in the viewport)
• After sorting, find the new index of that anchor row in the sorted data and force the grid to scroll to it

Example code snippet:

const gridRef = useRef(null);

const handleSort = () => {
  // Get current visible row range before sorting
  const { startIndex } = gridRef.current.getVisibleRowIndices();
  const anchorRow = data[startIndex];

  // Perform your sorting logic
  const sortedData = [...data].sort((a, b) => a.value - b.value);

  // Find the anchor row's new position in sorted data
  const newAnchorIndex = sortedData.findIndex(item => item.id === anchorRow.id);

  // Update state with sorted data
  setData(sortedData);

  // Wait for grid to re-render, then scroll to new anchor
  setTimeout(() => {
    gridRef.current.scrollToRow(newAnchorIndex);
  }, 0);
};

Make sure your MultiGrid's internal Grid component is attached to gridRef so you can access its scroll methods.

2. Verify Row Index Mapping in Custom Grid #

Since you modified MultiGrid's internal Grid component, double-check that your rowRenderer uses the correct index to fetch data from the sorted dataset:

const customRowRenderer = ({ index, key, style }) => {
  // Use the sorted data array here, NOT the original unsorted one
  const row = sortedData[index];
  return (
    <div key={key} style={style}>
      {row.content}
    </div>
  );
};

Mixing up old/new indices will cause the grid to render incorrect rows and miscalculate scroll positions.

3. Adjust Scroll Alignment & Animation #

React-virtualized's Grid has default scroll behavior that can conflict with sorting transitions. Try these tweaks:

• Set scrollToAlignment="auto" on your Grid component to let it preserve viewport position better
• If you're using dynamic row heights, call recomputeRowHeights() after sorting to ensure the grid recalculates layout correctly:

  setTimeout(() => {
    gridRef.current.recomputeRowHeights();
    gridRef.current.scrollToRow(newAnchorIndex);
  }, 0);
  

4. Disable Temporary Virtualization (For Small Datasets) #

If your dataset isn't extremely large, you can temporarily disable virtualization during sorting to avoid layout glitches:

• Add a state flag like isSorting
• When sorting, set isSorting to true, which forces the grid to render all rows instead of virtualizing
• After sorting completes and scroll is adjusted, set isSorting back to false

Start with the scroll anchor fix first—it's the most reliable solution for this specific issue. Let me know if you need help adapting any of these to your CodeSandbox implementation!

内容的提问来源于stack exchange，提问作者SILENT