React：通过id更新element的数据变量

如何解决React：通过id更新element的数据变量

由于性能问题，为了更快地运行，我想逐一刷新网格的单元格。我已经能够通过以下方式成功更改这些单元格的设计：

document.getElementById(`cell-${cell.row}-${cell.col}`).className =
      "cell cell-isPlaced";

每个单元格都有一个数据变量props.data.num，当我更改其设计时，我想以相同的方式进行刷新。出于某种原因，以下代码无法刷新网格上的数字（为便于理解，每个单元格的值均为0，我想将其更改为1）：

document.getElementById(`cell-${cell.row}-${cell.col}`).num = 1;

单元格：

const Cell = (props) => {
  let cell = () => {
    return (
      <div
        className={`cell ${getColor(props)}`}
        id={`cell-${props.data.row}-${props.data.col}`}
      >
        {props.data.num}
      </div>
    );
  };
  return cell();
};

export default Cell;

可以按我尝试的方式更改元素的数据吗？ （通常，所有单元格都显示0 num，这没有问题。）

网格渲染：

let grid = this.state.grid.map((row,index) => {
      return (
        <div key={index} className="row">
          {row.map((cell,cellIndex) => {
            return (
              <Cell
                key={cellIndex}
                data={cell}
              />
            );
           })}
       </div>
      );
    });

初始化期间单元格中的数据：

 function createGrid(props) {
  let grid = [];
  for (let i = 0; i < props.rows; i++) {
    grid.push([]);
    for (let j = 0; j < props.columns; j++) {
      grid[i].push({
        row: i,col: j,num: 0,});
    }
  }
  return grid;
}

解决方法

好吧，基本上您的组件不会刷新，因为 React 不知道它应该重新呈现：

React会在每次组件状态更改时安排渲染。

和

因此，子组件仅在使用其中一个功能更改了父组件的状态时更新。

由于您没有通过setState函数或其等效功能更改组件的状态，因此不会触发重新渲染。您可以阅读有关此主题here的更多信息。

为了解决这个问题，我想您有两个选择。要么将num props的更新转换为setState函数，要么尝试使用强力方式对类组件进行this.forceUpdate()，或者对功能组件执行类似的操作：

const [update,setUpdate] = useState(0);
const refresh = () => setUpdate(update + 1);