react-window如何解决FixedSizeList双层包裹问题实现原生table语义化表格

你遇到的结构错乱本质是DOM嵌套层级不符合HTML规范，被浏览器自动修正导致的：
当前代码实际渲染出来的未修正DOM结构是：

• 外层<table>标签
  • 自定义的<CargoTableHead />表头
  • react-window默认生成的外层div（因为outerElementType默认是div，未做修改）
    • 手动设置的<tbody>（因为配置了innerElementType="tbody"）
      • 所有的<tr>行

HTML规范明确规定，<table>标签的直接子级不允许出现div元素，浏览器会自动修正DOM结构，把夹在中间的div移到表格外部，最终打乱thead、tbody、tr、td的正常嵌套关系，就会出现所有td堆在第一列的渲染异常。

另外要明确两个包裹元素的作用边界，这两个元素确实无法省略：

• outerElementType是负责滚动计算的核心容器，会被react-window注入滚动事件监听、overflow:auto样式、高度宽度属性，所有虚拟列表的定位计算都绑定在这个元素上，不能替换成table/tbody这类不支持独立滚动的标签，否则滚动功能会直接失效。
• innerElementType是位于滚动容器内部、用来承载所有列表行的纯包裹元素，不负责核心计算，完全可以自定义结构。

• 删除在List组件外部手动书写的<table>标签，把表格的完整语义结构整合到自定义的innerElementType组件中
• 自定义的inner组件需要把table、thead放在同一层级，把tbody作为真正承载所有行的容器，同时接住react-window传递的ref和注入的布局样式
• 保留List默认的outerElementType（也就是div滚动容器），不要修改它的标签类型

对应的调整后代码参考：

// 自定义的inner容器组件，替代react-window默认的div inner
const TableInner = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ children, ...rest }, ref) => {
  return (
    <table className="CargoListTable">
      <CargoTableHead />
      {/* 把react-window注入的样式、ref全部绑定到tbody上 */}
      <tbody ref={ref} {...rest}>
        {/* 所有List渲染的tr行都会直接作为tbody的子元素 */}
        {children}
      </tbody>
    </table>
  );
});

// List组件的配置调整
return (
  <List
    height={600}
    itemCount={cargoList.length}
    itemSize={35}
    width={900}
    itemData={cargoList}
    // 替换成自定义的表格结构inner
    innerElementType={TableInner}
  >
    {Row}
  </List>
)

// 行组件保持原逻辑即可，react-window注入的定位style直接绑定到tr上
const Row: React.FC<RowProps> = ({ index, style, data }) => {
  const cargo = data[index];
  return (
    <tr style={style}>
      <td>{cargo.registrationNumber}</td>
      <td>{cargo.pol}</td>
      <td>{cargo.pod}</td>
    </tr>
  );
};

调整后的实际DOM结构完全符合HTML语义规范，不会触发浏览器修正：

• 最外层是List生成的div滚动容器（不侵入表格结构，只负责滚动功能）
  • 语义化的table标签
    • thead表头
      • th表头单元格
    • tbody容器（接收react-window注入的布局样式）
      • 每个tr行（带虚拟定位样式）
        • 对应的td数据单元格

注意：react-window给tr注入的position: absolute定位样式是完全合法的，只要tbody被注入了匹配总高度的height属性，浏览器的布局计算不会出现异常，也不会破坏表格的语义正确性。

小提示：Row组件里不需要手动写key={index}，react-window在遍历渲染每个列表项的时候会自动为每个行元素绑定唯一的key，手动重复绑定没有实际作用。

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