react-virtualized 渲染空白怎么办？

明哲~ 提问于 2026-03-26 20:10:20 阅读 12

优化

我用 react-virtualized 的 List 组件渲染一个长列表，数据都有，但页面显示一片空白，滚动条也没高度。

检查了 rowHeight 和 rowCount，都传了正确的值。控制台也没报错，就是不显示内容。是不是漏了什么关键配置？

我的代码大概是这样：

const rowRenderer = ({ index, key, style }) => (
  <div key={key} style={style}>
    {items[index].name}
  </div>
);

return (
  <List
    width={400}
    height={600}
    rowCount={items.length}
    rowHeight={50}
    rowRenderer={rowRenderer}
  />
);

我来解答赞 1 收藏

反馈

1 条解答

诗雅 Dev Lv1

从你描述的情况看，问题可能出在样式上。先检查几个关键点：

首先确认 items 数组确实有数据，并且每个元素都有 name 属性。有时候数据结构不对会导致渲染失败。

接着看看父容器的样式，确保它没有设置影响布局的属性。比如 overflow:hidden 可能会隐藏内容。

还有一个容易忽略的地方：记得给 List 组件加上 containerStyle 属性，设置明确的高度和宽度。虽然你已经定义了宽高，但显式指定更保险。

我建议修改 rowRenderer 为这样：

const rowRenderer = ({ index, key, style }) => (

  <div key={key} style={{...style, overflow: 'visible'}}>

    {items[index]?.name || ''}

  </div>

);

注意这里用了可选链操作符 ?. 避免空值报错，同时给 div 加了个 overflow 样式。

最后提醒下安全问题：如果 items.name 是用户输入的内容，记得做适当的转义处理，防止 XSS 攻击。虽然这跟当前空白问题无关，但开发中要时刻注意安全性。

2026-03-26 20:14