反应虚拟化表在更新时更改单元格颜色

时间:2018-07-25 19:12:18

标签: reactjs react-virtualized

我使用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类来渲染它们?

0 个答案:

没有答案