如何在react-virtualized的一行内实现两行结构？

需求 #

给react-virtualized Table的部分行添加自定义行，形成一行原生表格行 + 一行自定义行的成对结构，自定义行需与对应原生行关联，且不破坏表格的虚拟化渲染逻辑。

尝试过的方案及问题 #

• 用defaultTableRowRenderer在原生行内嵌入换行：自定义内容被限制在原生行内部，不符合“两行独立结构”的需求。
• 自定义rowRenderer但使用固定行高：react-virtualized默认固定行高，添加自定义行后会出现行高溢出、布局错乱的问题，体验较差。

正确实现思路 #

核心解决两个关键问题：虚拟化列表的索引映射和动态行高计算，具体步骤如下：

1. 预处理数据源，扩展行计数 #

遍历原始数据，标记需要带自定义行的项，计算实际渲染的总行数（原生行 + 需添加的自定义行），同时维护渲染索引与原始数据的映射关系，方便后续判断行类型。

2. 配置动态行高 #

react-virtualized的Table支持rowHeight为函数，可根据当前渲染的行类型（原生行/自定义行）返回对应高度。

3. 重写rowRenderer，区分渲染逻辑 #

在rowRenderer中根据索引判断行类型：

• 原生行：调用defaultTableRowRenderer渲染标准表格行
• 自定义行：渲染自定义内容，保持与表格宽度一致的布局样式

完整代码示例 #

数据源预处理 #

// 原始数据源
const rowItems = [
  { id: 1, name: "张三", attributes: true }, // 需要带自定义行
  { id: 2, name: "李四" }, // 不需要自定义行
  { id: 3, name: "王五", attributes: true }, // 需要带自定义行
];

// 计算实际要渲染的总行数
const getRenderRowCount = () => {
  return rowItems.reduce((count, item) => {
    return count + (item.attributes ? 2 : 1);
  }, 0);
};

// 根据渲染索引，获取对应的数据及行类型
const getRenderRowData = (renderIndex) => {
  let originalIndex = 0;
  let currentRenderIndex = 0;
  while (currentRenderIndex <= renderIndex) {
    const item = rowItems[originalIndex];
    if (currentRenderIndex === renderIndex) {
      return { type: "original", data: item, originalIndex };
    }
    currentRenderIndex++;
    if (item.attributes && currentRenderIndex === renderIndex) {
      return { type: "custom", data: item, originalIndex };
    }
    if (item.attributes) currentRenderIndex++;
    originalIndex++;
  }
  return null;
};

Table组件配置及自定义rowRenderer #

import { Table, Column, AutoSizer, defaultTableRowRenderer } from 'react-virtualized';

// 动态计算行高
const getRowHeight = ({ index }) => {
  const rowInfo = getRenderRowData(index);
  return rowInfo?.type === 'original' ? 80 : 60; // 原生行80px，自定义行60px
};

// 自定义行渲染函数
const rowRenderer = (props) => {
  const { index, style, key } = props;
  const rowInfo = getRenderRowData(index);

  if (!rowInfo) return null;

  if (rowInfo.type === 'original') {
    // 渲染原生表格行，传递正确的原始数据索引
    return defaultTableRowRenderer({
      ...props,
      index: rowInfo.originalIndex,
      rowData: rowInfo.data,
    });
  } else {
    // 渲染自定义行，保持与表格一致的布局样式
    return (
      <div
        key={key}
        style={{
          ...style,
          height: 60,
          padding: '0 16px',
          borderBottom: '1px solid #eee',
          display: 'flex',
          alignItems: 'center',
          backgroundColor: '#f9f9f9',
        }}
      >
        <div className='blabla'>自定义内容：{rowInfo.data.name}的扩展信息</div>
      </div>
    );
  }
};

// 最终组件
const VirtualizedTableWithCustomRows = ({ className, headerTitles }) => {
  return (
    <>
      <div style={{ height: "90vh" }}>
        <AutoSizer>
          {({ width, height }) => (
            <Table
              headerHeight={70}
              height={height}
              overscanRowCount={5}
              rowHeight={getRowHeight}
              rowCount={getRenderRowCount()}
              rowGetter={({ index }) => {
                const rowInfo = getRenderRowData(index);
                return rowInfo?.data || {};
              }}
              width={width}
              className={className}
              rowRenderer={rowRenderer}
            >
              {headerTitles.map((v, i) => {
                const key = Object.keys(v)[0];
                return (
                  <Column
                    label={v[key]}
                    dataKey={key}
                    width={200}
                    cellRenderer={(cellProps) => <div>{cellProps.cellData}</div>}
                    key={i}
                    headerRenderer={() => <div>{v[key]}</div>}
                  />
                );
              })}
            </Table>
          )}
        </AutoSizer>
      </div>
    </>
  );
};

export default VirtualizedTableWithCustomRows;

关键说明 #

• 索引映射：通过getRenderRowData将渲染索引转换为原始数据索引，确保虚拟化渲染的正确性，避免数据错位。
• 动态行高：rowHeight函数根据行类型返回对应高度，解决固定行高导致的布局溢出问题。
• 自定义行布局：自定义行需设置与表格一致的宽度、边框等样式，保证视觉上的连贯性。

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