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

}

Answer 1

嗯，基本上你的组件不会刷新，因为React不知道它应该重新渲染：每次组件状态发生变化时，React 都会安排一次渲染。和因此，子组件仅在使用其中一个函数更改了父组件的状态时更新。由于您不通过setState函数或等效功能更改组件的状态，因此不会触发重新渲染。为了解决这个问题，我想你有两个选择。要么将 num props 的更新转换为 setState 函数，要么尝试暴力方式并this.forceUpdate()为类组件做一个，或者为功能组件做这样的事情：const [update, setUpdate] = useState(0); const refresh = () => setUpdate(update + 1);