React中Adazzle Grid编辑后修改单元格CSS的实现方案咨询

当然可以修改单元格颜色！React是数据驱动的，和jQuery直接操作DOM的思路不同，但我们可以通过状态管理+组件自带的定制属性来实现，比你想象的更可控。结合你的代码，我给你梳理几个可行的思路：

一、推荐方案：利用列定义的cellClass结合状态控制单个单元格 #

react-data-grid的列配置支持cellClass属性，它可以接收一个回调函数，根据当前单元格的行/列信息动态返回类名。我们只需要在state中跟踪需要变色的单元格，再把这个状态和cellClass关联起来即可。

修改你的代码实现： #

首先，把全局的cellUpdateCss改成存储单个单元格状态的对象，用来记录哪一行哪一列需要变色：

constructor(props, context) {
  super(props, context);
  this.state = { 
    rows: [],
    updatedCells: {} // 结构：{ 行索引: { 列key: 'green/red/pending' } }
  };
}

然后在handleGridRowsUpdated中，先记录本次要更新的单元格，标记为"pending"（等待请求结果）：

handleGridRowsUpdated = ({ cellKey, fromRow, toRow, updated, action, originRow }) => {
  let rows = this.state.rows.slice();
  const cellsToUpdate = {};

  for (let i = fromRow; i <= toRow; i++) {
    let rowToUpdate = rows[i];
    let updatedRow = update(rowToUpdate, { $merge: updated });
    rows[i] = updatedRow;

    // 记录当前要更新的行和列
    cellsToUpdate[i] = Object.keys(updated).reduce((acc, key) => {
      acc[key] = 'pending';
      return acc;
    }, {});

    // 把行索引和列key传给post方法，方便后续更新状态
    this.postToServer(updatedRow.data, JSON.stringify(updated), i, Object.keys(updated));
  }

  this.setState(prev => ({
    rows,
    updatedCells: { ...prev.updatedCells, ...cellsToUpdate }
  }));
};

接下来修改postToServer，根据请求结果更新对应单元格的状态：

postToServer = (aX, vC, rowIdx, columnKeys) => {
  axios.post(this.props.postApi, { axNo: aX, updated: vC })
    .then((response) => {
      console.log(response);
      // 请求成功，标记为绿色
      this.setState(prev => ({
        updatedCells: {
          ...prev.updatedCells,
          [rowIdx]: {
            ...prev.updatedCells[rowIdx],
            ...columnKeys.reduce((acc, key) => {
              acc[key] = 'green';
              return acc;
            }, {})
          }
        }
      }));
    })
    .catch((error) => {
      console.log(error);
      // 请求失败，标记为红色
      this.setState(prev => ({
        updatedCells: {
          ...prev.updatedCells,
          [rowIdx]: {
            ...prev.updatedCells[rowIdx],
            ...columnKeys.reduce((acc, key) => {
              acc[key] = 'red';
              return acc;
            }, {})
          }
        }
      }));
    });
}

最后在列定义中，通过cellClass回调动态添加样式类：

render() {
  const columns = [
    // 示例列，你需要根据自己的实际列配置修改
    { 
      key: 'data', 
      name: 'Data', 
      cellClass: (props) => {
        // 根据当前行索引和列key获取状态
        const cellStatus = this.state.updatedCells[props.rowIdx]?.[props.column.key];
        return cellStatus ? `cell-${cellStatus}` : '';
      }
    },
    // 其他列同理配置
  ];

  return (
    <ReactDataGrid 
      columns={columns}
      rows={this.state.rows}
      onGridRowsUpdated={this.handleGridRowsUpdated} 
    />
  )
}

再添加对应的CSS样式：

.cell-green {
  background-color: #d4edda; /* 淡绿色，成功状态 */
}

.cell-red {
  background-color: #f8d7da; /* 淡红色，失败状态 */
}

.cell-pending {
  background-color: #fff3cd; /* 淡黄色，等待请求结果 */
}

这个方案完全遵循React的数据流，状态和视图一一对应，不会出现DOM和状态不一致的问题，是最推荐的实现方式。

二、不推荐：直接操作DOM（类似jQuery的方式） #

如果你非要像jQuery那样直接操作DOM，也可以通过ref获取react-data-grid的实例，然后找到对应的单元格元素，但这种方式违背了React的设计理念，容易导致状态混乱，维护成本高，只建议在特殊场景下临时使用。

示例（仅供参考，不推荐）：

// 在constructor中创建ref
this.gridRef = React.createRef();

// 在post请求回调中操作DOM
postToServer = (aX, vC, rowIdx, columnKey) => {
  axios.post(...)
    .then(() => {
      const cellElement = this.gridRef.current.getCellElement(rowIdx, columnKey);
      cellElement.classList.add('cell-green');
    })
};

// 在render中绑定ref
<ReactDataGrid ref={this.gridRef} ... />

三、替代组件推荐 #

如果你觉得react-data-grid的样式定制不够顺手，可以考虑这些更易定制的表格组件：

• MUI DataGrid：Material-UI生态下的表格组件，提供了getCellClassName等便捷的样式定制API，文档完善，上手简单。
• AG Grid：功能极其强大的企业级表格组件，支持各种复杂的样式定制、单元格渲染、数据操作，适合大型项目使用。

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