Taro.createCanvasContext(canvasId, this) 在H5编译下,会发现找不到对应canvas的ref引用

minzojian

我有一个组件,组件里有个canvas

render() {
    return (
      <View className="canvas-holder" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;">       
        <Canvas canvas-id='draw-canvas' disable-scroll="true" style="position:absolute;top:-1000px;width: 512px; height: 512px;transform-origin:left top;transform:scale({{canvasScale}})" ></Canvas>
      </View>
    )
  }

然后代码中想要去执行

Taro.createCanvasContext('draw-canvas', this)

会发现报错

createCanvasContext.js?3ef4:13 Uncaught (in promise) TypeError: Cannot read property 'vnode' of undefined
    at createCanvasContext (createCanvasContext.js?3ef4:13)

跟踪代码至
webpack:///../node_modules/@tarojs/taro-h5/src/api/canvas/createCanvasContext.js?3ef4

/**
* 创建 canvas 的绘图上下文 CanvasContext 对象
* @param {string} canvasId 要获取上下文的 <canvas> 组件 canvas-id 属性
* @param {Object} componentInstance 在自定义组件下，当前组件实例的this，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas> ，如果省略则不在任何自定义组件内查找
*/
const createCanvasContext = (canvasId, componentInstance) => {
  const refId = `__taroref_${canvasId}`
  const component = findRef(refId, componentInstance)

  /** @type {HTMLCanvasElement} */
  const canvas = component.vnode.dom.querySelector(`[canvasId=${canvasId}]`)
...

锁定findRef方法,进到webpack:///../node_modules/@tarojs/taro-h5/src/api/utils/index.js?c547

const findRef = (refId, componentInstance) => {
  if (componentInstance.isRoute) return
  return componentInstance[refId] || findRef(refId, componentInstance.vnode._owner)
}

发现一开始执行createCanvasContext所传的第二个参数this,对应的.vnode._owner里并没有我上边那个canvas的ref定义,按代码里的逻辑,就是找不到__taroref_draw-canvas

后来我修改了一下createCanvasContext

const createCanvasContext = (canvasId, componentInstance) => {
//  const refId = `__taroref_${canvasId}`
//  const component = findRef(refId, componentInstance)

  /** @type {HTMLCanvasElement} */
  const canvas = componentInstance.vnode.dom.querySelector(`[canvas-id=${canvasId}]`);//把canvasId换成了canvas-id
...

便能够正常找到canvas了.
所以,是我用法不正确?还是我发现了一个BUG?

PS:我用同样的代码编译小程序的时候,createCanvasContext第二个参数传的是this.$scope,一切倒也正常

蜘蛛paipai

@Xiaoli kk

Xiaoli

问题在这里组件属性统一使用驼峰法