React+TypeScript中Canvas元素JS样式设置遇空值错误求助

嘿，作为刚接触TypeScript几小时的新手，遇到这个类型错误真的太常见啦！TypeScript的严格类型检查就是在帮我们提前规避潜在的空值问题，咱们一步步来解决它～

为什么会报错？ #

你用React.createRef()创建的canvas ref，它的current属性类型是HTMLCanvasElement | null——因为在组件挂载之前，ref还没有关联到DOM元素，所以TypeScript会严格要求你处理null的情况，哪怕你知道componentDidMount里ref肯定已经存在。

几种解决方法 #

1. 空值检查（最推荐，安全可靠）

在使用this.canvas.current之前，先加个if判断确保它不是null，这样TypeScript就会知道进入代码块后，current一定是有效的DOM元素：

componentDidMount(){
  // 先检查ref是否存在
  if (this.canvas.current) {
    // 注意要加单位！比如'500px'，不然样式不会生效
    this.canvas.current.style.width = '500px';
    this.canvas.current.style.height = '500px';

    // 同时getContext也可能返回null，最好也做个检查
    const ctx = this.canvas.current.getContext('2d');
    if (ctx) {
      ctx.rect(20, 50, 100, 100);
      ctx.shadowColor = 'gray';
      ctx.shadowBlur = 10;
      ctx.shadowOffsetX = 10;
      ctx.shadowOffsetY = 10;
      ctx.fillStyle = "red";
      ctx.fill();
    }
  }
}

这个方法既解决了TypeScript的报错，还能避免运行时可能出现的空值问题，完全符合TypeScript的类型安全理念。

2. 非空断言操作符（!）快速解决

如果你非常确定componentDidMount中this.canvas.current不可能为null（毕竟组件挂载后DOM已经渲染完成），可以用!告诉TypeScript“我保证这个值不是null”：

componentDidMount(){
  // 用!断言current不为null
  this.canvas.current!.style.width = '500px';
  this.canvas.current!.style.height = '500px';

  // getContext同样可以用!断言
  const ctx = this.canvas.current!.getContext('2d')!;
  ctx.rect(20, 50, 100, 100);
  ctx.shadowColor = 'gray';
  ctx.shadowBlur = 10;
  ctx.shadowOffsetX = 10;
  ctx.shadowOffsetY = 10;
  ctx.fillStyle = "red";
  ctx.fill();
}

⚠️ 注意：这个方法要谨慎使用！如果后续代码改动导致current可能为null，TypeScript不会再提醒你，会直接导致运行时错误，所以只在你100%确定的场景下用。

额外小提示 #

你代码里的style.width = '500'没有加单位，浏览器是不会识别这个样式的，记得加上px或者其他合适的单位（比如%），这也是你样式没生效的一个关键原因哦～

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