grid - react-virtualized Grid.cellRenderer - 添加样式道具的问题

Question

我正在使用 Grid 组件并有一个 cellRenderer。在其中，我尝试将 backgroundColor 样式添加到外部 div。

customColumnRenderer(props: GridCellProps): React.ReactNode {  
    ...
      props.style.backgroundColor = "hotpink";
    ...
      return <div style={props.style} 
    ... </div>;   
}

一开始一切都很好，但后来我垂直滚动了一下，我得到了这个异常：

Uncaught TypeError: Cannot assign to read only property 'backgroundColor' of object '#<Object>'

当我查看调试器时。props.style 对我来说就像一个简单的对象。文档说“您可以根据需要添加其他类名或样式属性。”

关于我可能做错了什么的任何想法？

Answer 1

我能想到的最佳解决方法是使用扩展运算符合并来自不同对象的样式道具。像这样的东西：

customColumnRenderer(props: GridCellProps): React.ReactNode {  
    ...
      let myStyles = {backgroundColor: "hotpink"};
      let styles = {...props.style, ...myStyles};
    ...
      return <div style={styles} 
    ... </div>;   
}