React中调用canvas的getContext方法报TypeError错误如何解决

• 你将用于获取画布上下文的ref绑定到了<div>元素上，getContext('2d')是<canvas>原生元素独有的API，普通div的DOM实例不具备该方法，调用时自然会抛出类型错误。
• 你参考的教程中ref是直接绑定在canvas元素上的，你修改了绑定的元素类型但没有同步调整逻辑，所以出现了不兼容问题。

你需要同时保留背景画布和子元素插槽，调整后即可正常运行：

1. 修改MatrixRain.js代码 #

import './MatrixRain.css';
import React, {useEffect, useRef} from 'react';    

const MatrixRain = ( props ) => {
    const canvasRef = useRef(null)
  
    useEffect(() => {
      // 先判断实例存在再操作，避免边界场景报错
      if(!canvasRef.current) return
      const canvas = canvasRef.current;
      const context = canvas.getContext('2d'); 
      // 后续数字雨绘制逻辑可以写在这里
    }, [])

    return (
        <div className='matrix-rain-wrapper'>
            {/* 将ref绑定到真正的canvas元素上 */}
            <canvas ref={canvasRef} className="matrix-rain-bg" />
            {/* 业务内容容器，层级高于画布 */}
            <div className="matrix-rain-content">
                {props.children}
            </div>
        </div>
    )
};

export default MatrixRain

2. 补充MatrixRain.css样式 #

确保canvas铺满容器作为背景，业务内容正常显示在上层：

.matrix-rain-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
}
.matrix-rain-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: #000; /* 数字雨默认搭配黑色背景，可自行调整 */
}
.matrix-rain-content {
  position: relative;
  z-index: 1;
}

修改完成后getContext报错就会消失，你可以继续在useEffect中完成数字雨的绘制逻辑，业务组件也会正常显示在数字雨背景上层。

内容的提问来源于stack exchange，提问作者Q-man