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



  • 我有一个组件,组件里有个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,一切倒也正常



  • @Xiaoli kk



  • 79b563d9-ae40-4b32-b131-f9ab85e908d8-image.png
    问题在这里👀 组件属性统一使用驼峰法


登录后回复