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

Question

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

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号，这没有问题）。

网格渲染：

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;
}

Answer 1

嗯，基本上你的组件不会刷新，因为 React 不知道它应该重新渲染：

React schedules a render every time the state of a component changes.

和

As a result of that, the child components only updates when the state of the parent component has been changed with one of those functions.

由于您不通过 setState 函数或其等价函数更改组件的状态，因此不会触发 re-renders。您可以阅读有关此主题的更多信息 here。

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

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

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

React: Update data variable of element by id

javascript

getelementbyid

reactjs