React-data-grid：根据行的值更改行颜色

Question

我的组件测试被调用并在 props 中获取一个对象，该对象包含来自 mysql 请求的数据（Select * 来自 db.mytable）。我将 this.props.data 存储在一个状态中并将其呈现在 ReactDataGrid 中。

我想要做的是在我的 ReactDataGrid 中更改单元格的值时更新和更改行的颜色。例如，如果用户右键单击某行，会出现一个上下文菜单，他可以在“选中”和“取消选中”之间进行选择。当他单击检查时，我想更新该行并使其显示为绿色。

我有一个数据库，用于存储已检查状态，因此当用户刷新页面时，该行应保持绿色。

我该怎么做？

Answer 1

因此，当我在上下文菜单中单击“检查”时，将调用此函数，它将更新我的状态 table，其中包含以下行：

 //right click then check
  rowCheck = (rowIdx) => {
    var tableState=this.state.tableState.concat([])
    tableState[rowIdx.rowIdx].CHECKED='Y'
    this.setState({tableState})
  }

RowsRenderer 函数：

RowRenderer = ({ renderBaseRow, ...props }) => {
    const color = this.state.tableState[props.idx].CHECKED==='Y' ? "blue" : "";
    return <div style={{color}}>{renderBaseRow(props)}</div>;
  };

data-grid :

<ReactDataGrid
            columns={this.state.column}
            rowGetter={i => this.state.tableState[i]}
            rowsCount={this.state.tableState.length}
            minHeight={500} 

            enableCellSelect={true}
            onGridRowsUpdated={this.onGridRowsUpdated}
            cellNavigationMode={'changeRow'}

            rowRenderer={this.RowRenderer}

            contextMenu={
              <ExampleContextMenu
                onRowCheck={(e, {rowIdx})=>this.rowCheck({rowIdx})}
                onRowUncheck={(e, { rowIdx }) => this.rowUncheck({rowIdx})}
              />
            }
            RowsContainer={ContextMenuTrigger}

            rowSelection={{
              showCheckbox: true,
              enableShiftSelect: true,
              onRowsSelected: this.onRowsSelected,
              onRowsDeselected: this.onRowsDeselected,
              selectBy: {
                indexes: this.state.selectedIndexes
              }
            }}
          />

Answer 2

添加到上述解决方案：我想更改行的背景颜色而不是颜色本身，所以我最终将 class 添加到 div 包装器而不是样式。

<div className={classnames({ 'focused-row': focused })}>{data.renderBaseRow(data)}</div>

然后在我的css中添加了

.focused-row .react-grid-Cell {
    background-color: #f5deff !important;
}

否则单元格的背景颜色会覆盖行的背景颜色

React-data-grid：根据行的值更改行颜色

React-data-grid : Changing a row color depending on a value of the row

reactjs

react-data-grid