react-virtualized Grid.cellRenderer添加style属性引发异常问题咨询

我之前也踩过这个坑！问题核心在于没有正确合并react-virtualized传递的style属性与你的自定义样式。

错误写法（导致滚动异常） #

如果直接替换或未合并样式，就会出现滚动后样式失效的情况：

const cellRenderer = (props) => {
  // 直接替换props.style，丢失了Grid控制单元格定位/尺寸的关键样式
  return <div style={{ backgroundColor: '#f0f0f0' }}>{props.children}</div>;
};

或者重复写style属性（滚动时Grid更新的style会覆盖自定义样式）：

const cellRenderer = (props) => {
  return <div style={props.style} style={{ backgroundColor: '#f0f0f0' }}>{props.children}</div>;
};

正确写法（合并样式） #

你需要把Grid传递的style（包含单元格定位、宽高、可见性等核心属性）和自定义样式合并，确保滚动时核心样式不丢失，同时保留你的背景色：

const cellRenderer = ({ style, ...restProps }) => {
  // 用扩展运算符合并，自定义样式放后面可覆盖冲突属性（如果有的话）
  const mergedStyle = {
    ...style,
    backgroundColor: '#f0f0f0' // 你的自定义背景色
  };

  return <div style={mergedStyle} {...restProps}>{/* 单元格内容 */}</div>;
};

为什么会出现这个问题？ #

react-virtualized的Grid靠复用单元格DOM实现虚拟化，滚动时会动态更新props.style里的top/left/width/height甚至visibility等属性，用来控制单元格的位置和显示状态。如果不合并这些属性，要么自定义样式覆盖了Grid的必要样式，要么滚动时新的style没带上你的背景色，最终导致显示异常。

官方文档说的“按需添加额外的类名或样式属性”，本质是在保留原有样式的基础上补充，而非替换原有样式。

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