React中如何在ComponentDidMount生命周期方法中访问动态创建的DOM元素？

问题根源 #

你的Canvas是通过状态控制动态渲染的（比如初始未开启渲染，后续通过更新state触发渲染），而ComponentDidMount仅在组件首次挂载完成后执行一次，此时Canvas还没被渲染到DOM中，所以无法获取到对应元素。

具体解决方案 #

1. 用React Refs绑定Canvas #

先在组件类中创建ref：

class CanvasComponent extends React.Component {
  canvasRef = React.createRef();
  
  // 其他业务代码
}

渲染Canvas时绑定该ref：

render() {
  return (
    <div>
      {/* 假设showCanvas是控制Canvas显示的状态 */}
      {this.state.showCanvas && <canvas ref={this.canvasRef} />}
    </div>
  );
}

2. 在ComponentDidUpdate中处理Canvas #

因为动态渲染的Canvas会在state更新后才挂载，所以要在componentDidUpdate中判断元素是否存在：

componentDidUpdate(prevProps, prevState) {
  // 仅当showCanvas状态从false变为true时执行
  if (!prevState.showCanvas && this.state.showCanvas && this.canvasRef.current) {
    const canvas = this.canvasRef.current;
    const ctx = canvas.getContext('2d');
    // 这里可以进行Canvas的初始化操作，比如设置尺寸、绘制基础图形等
  }
}

3. 多Canvas场景的处理 #

如果是循环生成多个Canvas，使用回调ref来逐个获取：

class CanvasComponent extends React.Component {
  canvasRefs = {};

  saveCanvasRef = (canvasId) => (element) => {
    if (element) {
      this.canvasRefs[canvasId] = element;
      // 可直接在这里对当前Canvas做初始化
    }
  };

  render() {
    return (
      <div>
        {this.state.canvasList.map(canvas => (
          <canvas key={canvas.id} ref={this.saveCanvasRef(canvas.id)} />
        ))}
      </div>
    );
  }
}

这样就能保证在Canvas被渲染到DOM后，你能准确获取并操作对应的元素。

内容的提问来源于stack exchange，提问作者A.G.Progm.Enthusiast