React点击按钮下载Canvas图片报错：canvas1为null问题排查

错误点说明 #

• 按钮事件绑定错误：React中事件属性采用驼峰式命名onClick，而非原生DOM的小写onclick；同时你直接写onclick={download()}会导致组件渲染时立刻执行download函数，而非点击按钮时触发，正确写法是传递函数引用onClick={download}——这也是页面加载时就触发download、此时canvas可能未完成挂载导致null的核心原因。
• DOM查询不如Ref可靠：你已经通过useRef创建了canvas的引用，完全没必要再用document.getElementById("mycanvas")查询DOM，直接使用canvas.current更符合React组件思维，还能避免重复id、DOM节点未挂载等问题。
• useEffect缺少依赖数组：当前useEffect没有设置依赖项，会在组件每次渲染时都执行draw方法，添加依赖数组[draw, height, width]可让它仅在属性变化时重新执行，提升性能。

修正后的完整代码 #

import React from "react";
import PropTypes from "prop-types";

const Canvas = ({ draw, height, width }) => {
  const canvas = React.useRef();

  React.useEffect(() => {
    const context = canvas.current.getContext("2d");
    draw(context);
  }, [draw, height, width]); // 添加依赖数组

  function download(){
    const canvasElement = canvas.current;
    if (!canvasElement) return; // 增加空值判断，避免意外报错
    let url = canvasElement.toDataURL("image/png");
    let link = document.createElement('a');
    link.download = 'filename.png';
    link.href = url;
    link.click();
  }

  return (
  <>
    <canvas ref={canvas} height={height} width={width} />
    <div className="div">
      <button onClick={download}>Download!</button>
    </div>
  </>
  )
};

Canvas.propTypes = {
  draw: PropTypes.func.isRequired,
  height: PropTypes.number.isRequired,
  width: PropTypes.number.isRequired
};

export default Canvas;

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