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
-
问题在这里组件属性统一使用驼峰法