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