有条件地将类渲染到网格单元，然后在状态更改时将其删除

如何解决有条件地将类渲染到网格单元，然后在状态更改时将其删除

好的，这里是第一次提问，但我无法将类渲染到网格单元，然后将其删除。这个想法是网格是地板，班级代表一个围绕它移动的房间。我想渲染单元格 id 与 state 中保存的位置相匹配的 roomba。这是我的网格组件代码：

---

import React,{ useState,useEffect } from "react";

function Grid(props) {
  const [position,setPosition] = useState(props.location);
  const [roomba,setRoomba] = useState({
    location: "1,1",});
  const theRoomba = `${position[0]},${position[1]}`;
  const renderRoomba = document.getElementById(theRoomba);

  useEffect(() => {
    if (roomba) {
      setPosition(props.location);
      setRoomba(position);
      console.log("Im the current location",props.location);
    }
  },[props.location]);

  const grid = [];
  for (let i = 10; i >= 1; i--) {
    for (let j = 10; j >= 1; j--) {
      grid.push(
        <div className="square" id={`${i},${j}`} key={`${i},${j}`}>
          {`${i},${j}`}
        </div>
      );
    }
  }

  const updatedGrid = [];
  grid.map((cell) => {
    if (renderRoomba) {
      renderRoomba.classList.add("roomba");
      updatedGrid.push(cell);
    } else {
      updatedGrid.push(cell);
    }
    return updatedGrid;
  });
  return <div className="grid">{updatedGrid}</div>;
}

export default Grid;

---

我是个菜鸟，知道这可能是臃肿的，但它目前呈现我的 10x10 网格，我可以移动我的 roomba，但永远无法从前一个单元格中删除 className='roomba'。我尝试了一些 DOM 操作方法，但似乎没有什么是“反应式”的。感谢任何帮助/反馈，这整个星期都在折磨我的大脑！