React应用切换3D模式时无法创建Canvas的WebGL上下文问题

核心问题分析 #

你遇到的WebGL上下文创建失败，主要是状态不同步导致的渲染时机错误，以及canvas尺寸初始化异常这两个原因：

1. 状态变量不一致
   代码里同时用了this.view3D实例变量和this.state.view3D状态变量，但两者没有同步。比如constructor里初始化的是view3D = false（没绑定this，实际this.view3D是undefined），但render里判断的是this.state.view3D，drawImage里又用this.view3D做判断。这种混乱会导致drawImage3D的调用时机和canvas的挂载状态不匹配——可能canvas还没完成DOM渲染，就被调用了。

2. canvas尺寸无效
   当切换到3D模式时，React重新渲染组件是异步的，若drawImage3D在canvas刚挂载时就执行，父元素布局可能还没完成，导致canvas.clientWidth或canvas.clientHeight为0。此时把canvas的宽高设为0，部分浏览器会因为尺寸无效而拒绝创建WebGL上下文。

修复步骤 #

1. 统一状态管理

把view3D完全纳入React状态，删除独立的实例变量：

constructor(props: MapViewProps) {
    super(props);
    this.state = { view3D: false }; // 初始化到state中
    this.canvasRef = React.createRef();
    this.dynamicCanvasRef = React.createRef();
    this.d3CanvasRef = React.createRef();
    // ... 其他初始化逻辑
}

drawImage() {
    // 改用state中的view3D判断模式
    if(this.state.view3D) {
        this.drawImage3D();
    } else {
        this.drawImage2D();
    }        
}

2. 确保canvas挂载后再调用绘制逻辑

利用React生命周期或setState回调，保证DOM更新完成后再执行绘制：

• 方式一：用componentDidUpdate监听状态变化

componentDidUpdate(prevProps: MapViewProps, prevState: { view3D: boolean }) {
    // 当view3D状态变化时，触发绘制
    if (prevState.view3D !== this.state.view3D) {
        this.drawImage();
    }
}

• 方式二：在切换模式的setState回调中调用绘制

// 示例：切换模式的函数
toggleViewMode = () => {
    this.setState(prevState => ({ view3D: !prevState.view3D }), () => {
        // 回调中执行，确保canvas已挂载完成
        this.drawImage();
    });
}

3. 修复canvas尺寸初始化

避免设置无效的宽高，强制保证canvas尺寸至少为1x1：

drawImage3D() {
    const canvas = this.d3CanvasRef.current;
    if (!canvas) return;

    // 确保宽高不为0
    const width = Math.max(canvas.clientWidth, 1);
    const height = Math.max(canvas.clientHeight, 1);
    canvas.width = width;
    canvas.height = height;

    const gl = canvas.getContext("webgl");
    if (!gl) {
        alert("Unable to initialize WebGL. Your browser or machine may not support it.");
        return;
    }

    // ... 后续WebGL绘制逻辑
}

4. 检查CSS样式

确认canvasStyle和父元素的样式正确设置了宽高，避免canvas因布局问题导致尺寸为0。

内容的提问来源于stack exchange，提问作者Vili