首页 > 解决方案 > react-virtualized table 在更新时更改单元格颜色

问题描述

我使用 react-virtualized Table 实时呈现数据。

render() {
   ...
   return(  
   <div>
      <AutoSizer disableHeight>
        {({width}) => (
          <Table
            ref="Table"
            headerClassName={styles.headerColumn}
            height={height}
            noRowsRenderer={this._noRowsRenderer}
            rowHeight={ rowHeight}
            rowGetter={rowGetter}
            rowCount={rowCount}
            scrollToIndex={scrollToIndex}
            sort={this._sort}
            sortBy={sortBy}
            sortDirection={sortDirection}
            width={width}>
            <Column
              label="Index"
              cellDataGetter={({rowData}) => rowData.index}
              dataKey="index"
              disableSort={!this._isSortEnabled()}
              width={60}
            />
            <Column
              dataKey="name"
              disableSort={!this._isSortEnabled()}
              headerRenderer={this._headerRenderer}
              width={90}
            />
          </Table>
        )}
      </AutoSizer>
    </div>
);

}

我想为已更新的单元格添加发光效果。发光效果可以用css动画实现

@-webkit-keyframes glow-effect {
    from {background-color: red;}
    to {background-color: yellow;}    
}

我怎样才能知道最近更新了哪些单元格,以便我可以使用发光效果 css 类来渲染它们?

标签: reactjsreact-virtualized

解决方案


推荐阅读