react-window列表项间距调整问题：集成react-window-infinite-loader后的样式难题

react-window的虚拟滚动依赖itemSize精确计算列表项的位置与容器布局，直接添加内边距/外边距而不调整itemSize会导致布局错位，以下是具体解决方案：

核心思路 #

将内边距/间距的空间计入itemSize，同时在列表项内部元素添加间距样式，避免破坏react-window的定位计算。

具体修改步骤 #

1. 调整List组件的itemSize #

把原来的itemSize={30}改为包含间距的数值，比如要给每个项上下各加5px内边距，就设置itemSize={40}（30 + 5*2）：

<List
  style={{ position: "absolute", width: "100%", marginTop: 50 }}
  className="absolute top-[110%] z-50 bg-white w-full"
  height={250 - 40}
  itemCount={testData.length}
  itemSize={40} // 调整为包含间距的高度
  width={300}
  onItemsRendered={onItemsRendered}
  ref={ref}
>
  {({ index, style }) => <Row index={index} style={style} />}
</List>

2. 给列表项内部元素添加间距样式 #

在Row组件的内层div添加内边距类（利用你已使用的Tailwind CSS）：

const Row = ({ index, style }) => {
  let label;
  if (testData[index].loading === LOADED) {
    label = `${testData[index].title}`;
  } else {
    label = "Loading...";
  }
  return (
    <div
      className={`whitespace-nowrap overflow-hidden text-ellipsis`}
      style={style}
    >
      {/* 添加上下内边距，左右可按需调整 */}
      <div className="py-2 px-3">{label}</div>
    </div>
  );
};

注意事项 #

• 不要直接给外层div（即接收react-window传递的style的元素）加margin，这会干扰虚拟滚动的定位计算，导致项偏移或滚动异常。
• 如果需要更明显的分隔效果，还可以给内层div添加底部边框，比如border-b border-gray-100，同样要确保itemSize包含边框高度。

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