如何解决react-virtualized递归嵌套可变高度虚拟化列表子级失效问题

问题分析 #

你的代码存在以下核心问题导致子级列表无法正常工作：

1. 共享缓存冲突：全局CellMeasurerCache被父级和所有子级列表共用，导致行高测量数据混乱。
2. 错误的滚动容器：子级列表使用WindowScroller，但它属于父级列表的行内元素，不应绑定到窗口滚动。
3. 虚拟化依赖缺失：虚拟列表需要固定视口高度才能计算可见行，子级列表未设置有效高度。

修正方案 #

以下是修复后的完整代码，关键改进点包括：每个列表实例独立缓存、区分顶级/嵌套列表的滚动处理、为嵌套列表设置固定视口高度：

import * as React from "react";
import { render } from "react-dom";
import {
  List,
  CellMeasurerCache,
  CellMeasurer,
  WindowScroller,
  AutoSizer
} from "react-virtualized";
import { Panel } from "react-bootstrap";

import "./styles.css";

const VirtualizedList = ({ length, depth }) => {
  // 每个列表实例拥有独立的测量缓存
  const cache = React.useMemo(() => new CellMeasurerCache({ fixedWidth: true }), []);

  const renderRow = ({ index, key, parent, style }) => {
    return (
      <CellMeasurer
        rowIndex={index}
        columnIndex={0}
        key={key}
        cache={cache}
        parent={parent}
        enableMargins
      >
        <div
          style={{
            ...style,
            height: "auto",
            display: "flex",
            flexDirection: "column",
            padding: "8px",
            borderBottom: "1px solid #eee",
          }}
        >
          <span>Row {index} (Depth: {depth})</span>
          <div
            style={{
              border: "solid 1px #ccc",
              height: `${100 + (index % 30) * 10}px`,
              margin: "8px 0",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            Variable height content
          </div>
          {/* 每5行渲染嵌套列表，限制嵌套深度为2层 */}
          {index % 5 === 0 && depth < 2 && (
            <div style={{ border: "solid 2px red", marginTop: "8px" }}>
              <VirtualizedList length={10} depth={depth + 1} />
            </div>
          )}
        </div>
      </CellMeasurer>
    );
  };

  // 顶级列表使用WindowScroller绑定窗口滚动
  if (depth === 0) {
    return (
      <Panel>
        <Panel.Body>
          <WindowScroller>
            {({ height, isScrolling, scrollTop, onChildScroll }) => (
              <AutoSizer>
                {({ width }) => (
                  <List
                    height={height}
                    width={width}
                    deferredMeasurementCache={cache}
                    isScrolling={isScrolling}
                    rowCount={length}
                    rowHeight={(params) => cache.rowHeight(params)}
                    rowRenderer={renderRow}
                    scrollTop={scrollTop}
                    onChildScroll={onChildScroll}
                  />
                )}
              </AutoSizer>
            )}
          </WindowScroller>
        </Panel.Body>
      </Panel>
    );
  }

  // 嵌套列表使用固定视口高度，AutoSizer获取父容器宽度
  return (
    <Panel>
      <Panel.Heading>Nested List (Depth: {depth})</Panel.Heading>
      <Panel.Body>
        <AutoSizer>
          {({ width }) => (
            <List
              height={300} // 固定视口高度是虚拟化的核心要求
              width={width}
              deferredMeasurementCache={cache}
              rowCount={length}
              rowHeight={(params) => cache.rowHeight(params)}
              rowRenderer={renderRow}
            />
          )}
        </AutoSizer>
      </Panel.Body>
    </Panel>
  );
};

const rootElement = document.getElementById("root");
render(<VirtualizedList length={1000} depth={0} />, rootElement);

关键改进说明 #

1. 独立缓存机制：通过useMemo为每个VirtualizedList实例创建专属CellMeasurerCache，避免父子列表的测量数据干扰。
2. 滚动容器区分：
   • 顶级列表使用WindowScroller绑定窗口滚动，适配全屏场景。
   • 嵌套列表脱离窗口滚动，使用固定高度（300px）作为虚拟视口，确保虚拟化逻辑正常运行。
3. 递归深度控制：通过depth参数限制嵌套层级，避免无限递归和性能问题。
4. 正确的行高测量：CellMeasurer自动包含嵌套列表的高度，确保父级列表能准确计算每行的总高度。

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