Javascript 如何使用ref来更改我单击的元素的类名？

我想创建引用图中每个单元格的引用。按照通常的方式，我只获得对图形中创建的最后一个单元格的引用。 详情如下:

如何生成网格：

class Grid {
  getInitialGrid() {
    const grid = [];
    for (let row = 0; row < row_size; row++) {
      const currentRow = [];
      for (let col = 0; col < col_size; col++) {
        currentRow.push(this.createNode(col, row));
      }
      grid.push(currentRow);
    }
    return grid;
  };



  createNode(col, row) {
    return {
      col,
      row,
    };
  };
}

类网格{
getInitialGrid（）{
常量网格=[]；
for（让行=0；行<行大小；行++）{
const currentRow=[]；
for（设col=0；col

我拥有的.jsx文件。我已经指出了裁判应该在哪里

        <div
          className="table"

        >
          {grid.map((row, index) => {
            return (
              <div key={index}
              >
                {row.map((node) => {
                  
                  
                  return ( // each node
                    <div key={col}
                      //this is where I want to use the ref
                      id={`${row}-${col}`}
                      className={`cell ${this.classNameFunc(begNode, endNode, wallNode, isVisited)}`}
                      onMouseDown={() => this.mouseTest(row, col)}
                    >
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>

{grid.map（（行，索引）=>{
返回(
{row.map（（节点）=>{
返回（//每个节点
this.mouseTest（row，col）}
>
);
})}
);
})}

您不需要ref来更改所单击元素上的类。使用onClick事件和在分配的回调中处理元素类（添加/删除）更简单。请附带一个工作代码段，如果您有一个代码段清楚地显示了您的问题，它将比不带代码段更快地解决您的问题，例如，您可以从代码沙盒创建一个代码段。此处没有足够的代码来调试您的问题。此外，您只能将引用作为最后手段；他们是世界的逃生舱。为什么要使用refs？@davidfredrick先生，我正在使用refs更改图表中某些单元格的类名。感谢大家的反馈，下次我会改进我的问题。@IsaKurbanov为什么不使用CSS模块（与CreateReact应用程序一起提供）并只分配一个类名呢？css模块和类名不需要ref就可以工作。单击元素时不需要ref来更改类。使用onClick事件和在分配的回调中处理元素类（添加/删除）更简单。请附带一个工作代码段，如果您有一个代码段清楚地显示了您的问题，它将比不带代码段更快地解决您的问题，例如，您可以从代码沙盒创建一个代码段。此处没有足够的代码来调试您的问题。此外，您只能将引用作为最后手段；他们是世界的逃生舱。为什么要使用refs？@davidfredrick先生，我正在使用refs更改图表中某些单元格的类名。感谢大家的反馈，下次我会改进我的问题。@IsaKurbanov为什么不使用CSS模块（与CreateReact应用程序一起提供）并只分配一个类名呢？css模块和类名不需要引用就可以工作。