React-Window滚动时子项内容错位怎么办？

W″俊豪提问于 2026-02-06 20:14:29 阅读 38

优化

我在用react-window做长列表优化时遇到问题，当滚动到中间位置，子项的内容会突然错位覆盖到其他项上。之前按教程设置了固定高度，但实际运行时还是有问题。

我的代码结构是这样的：


<FixedSizeList
  height={500}
  width={'100%'}
  itemSize={50}
  itemCount={100}
>
  {({ index, style }) => (
    <div style={{ ...style, padding: '10px' }}>
      内容{index}
    </div>
  )}
</FixedSizeList>

尝试过调整itemSize的值和给子项加固定高度，但滚动到第20项左右时文字还是会跑到上面的格子里。是不是因为内边距影响了计算？或者需要在style里强制设置高度？

长列表优化

我来解答赞 3 收藏

反馈

1 条解答

❤自帅 Lv1

你这个问题确实是react-window里常见的坑。错位的原因确实是padding导致的，虽然你设置了固定高度，但是react-window的计算是基于itemSize的，padding是在这个基础上额外加的，会导致实际子项的高度超过预期，进而触发渲染错位。

解决方案很简单，别在子项上加padding，直接用itemSize把高度算准就行。如果你的子项需要内边距，那就把padding的值加到itemSize里，比如padding是10px上下，那itemSize就改成70，这样总高度就正确了。

像你这个例子，把itemSize改成70应该就能解决问题了：

height={500}
width={'100%'}
itemSize={70}
itemCount={100}
{({ index, style }) => (

内容{index}

)}

这样react-window内部的计算就不会错位了。如果还要加margin或者border，也一样要算进去。react-window效率高就高在不做多余计算，但这也意味着我们得自己处理这些细节。

2026-02-06 21:01