Rescript-react创建隐藏canvas调用getContext找不到字段问题如何解决？

问题解答 #

1. 你没有成功创建可用的HTML Canvas对象

你当前的写法存在两层问题：

• 首先React.createElement返回的是React虚拟DOM节点（对应类型定义中的element不透明类型），它只是描述UI结构的普通JS对象，不是真实挂载在DOM树中的原生元素，天然不具备getContext这类原生DOM API。
• 其次你调用createElement时传入的第一个参数是返回字符串"canvas"的自定义组件，渲染出来的是文本节点，连虚拟DOM层面的canvas标签都没有创建成功。

2. 要调用原生元素方法必须先拿到真实DOM引用

如果需要操作已经通过React渲染到页面上的元素，需要通过Ref机制获取真实DOM实例，步骤如下：

• 用React.useRef创建ref容器，指定泛型为Option.t<HTMLCanvasElement.t>
• 将ref绑定到canvas虚拟DOM的ref属性上
• 等组件挂载完成后（在useEffect回调中）访问ref的current值，此时拿到的就是原生Canvas元素，可以直接调用getContext等方法。
  参考代码：

@react.component
let make = () => {
  let canvasRef = React.useRef<Option.t<HTMLCanvasElement.t>>(None)

  React.useEffect0(() => {
    switch canvasRef.current {
    | Some(canvas) => 
      let ctx = canvas->HTMLCanvasElement.getContext2d()
      // 执行绘图逻辑
    | None => ()
    }
    None
  })

  <canvas 
    ref={ReactDOM.Ref.domRef(canvasRef)} 
    style={ReactDOM.Style.make(~display="none", ())} 
  />
}

3. 临时使用的隐藏Canvas无需走React渲染逻辑

你当前的场景是仅用Canvas做图片尺寸处理，不需要渲染到页面上，直接调用原生Web API创建即可，更简单高效，参考实现：

let resize = async (dataUrl: string, targetWidth: int, targetHeight: int) => {
  // 直接创建临时Canvas元素，不需要挂载到DOM树
  let canvas = document.createElement("canvas")
  canvas->Element.setAttribute("style", "display: none;")
  let ctx = canvas->HTMLCanvasElement.getContext2d()

  // 加载原始图片
  let img = document.createElement("img")
  await img->HtmlImageElement.loadSrc(dataUrl)

  // 调整尺寸绘制
  canvas->HTMLCanvasElement.width = targetWidth
  canvas->HTMLCanvasElement.height = targetHeight
  ctx->Canvas2d.drawImageImage(img, 0., 0., float_of_int(targetWidth), float_of_int(targetHeight))

  // 返回处理后的dataUrl
  canvas->HTMLCanvasElement.toDataURL("image/png")
}

4. 这类问题的排查方法

• 优先看类型报错提示：你收到的The record field getContext can't be found本质是类型不匹配，先确认你调用方法的变量类型是什么，和你预期的原生DOM类型是否一致。
• 查绑定源码：Rescript的所有Web API、React API绑定都有公开的.resi接口定义文件，直接看对应类型的定义就能知道支持哪些属性和方法，React.element的定义明确说明它是不透明类型，没有DOM相关属性。
• 区分虚拟DOM和真实DOM：所有React.createElement返回的都是虚拟DOM，只有通过Ref获取、或者直接调用document下的创建方法拿到的才是真实DOM元素，只有真实DOM能调用原生API。

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