taro无法获取 canvas实例

[luosijie]

相关平台

微信小程序

小程序基础库: 2.12.2
使用框架: React

复现步骤

componentDidMount() {
        const query = wx.createSelectorQuery()
        query
        .select('#myCanvas')
        .fields({ node: true, size: true })
        .exec(res => {
            console.log("my-canvas", res);
        });
    }

render() {
        return (
            <View className="canvas-container">
                <canvas id="myCanvas" type="2d"/>
                <CoverView className="add-image">
                    <CoverImage className="image" src={imageAdd} />
                    <CoverView className="label">添加图片</CoverView>
                </CoverView>
            </View>
        )
    }

期望结果

正常返回一个canvas实例

实际结果

返回的 res 是 [null]]

环境信息

Taro CLI 2.2.7 environment info:
    System:
      OS: macOS 10.14.6
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.13.0 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.12.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 2.2.7 => 2.2.7 
      @tarojs/components-qa: 2.2.7 => 2.2.7 
      @tarojs/mini-runner: ^2.2.7 => 2.2.7 
      @tarojs/mobx: 2.2.7 => 2.2.7 
      @tarojs/mobx-h5: 2.2.7 => 2.2.7 
      @tarojs/router: 2.2.7 => 2.2.7 
      @tarojs/taro: 2.2.7 => 2.2.7 
      @tarojs/taro-alipay: 2.2.7 => 2.2.7 
      @tarojs/taro-h5: 2.2.7 => 2.2.7 
      @tarojs/taro-qq: 2.2.7 => 2.2.7 
      @tarojs/taro-quickapp: 2.2.7 => 2.2.7 
      @tarojs/taro-swan: 2.2.7 => 2.2.7 
      @tarojs/taro-tt: 2.2.7 => 2.2.7 
      @tarojs/taro-weapp: 2.2.7 => 2.2.7 
      @tarojs/webpack-runner: 2.2.7 => 2.2.7 
      eslint-config-taro: 2.2.7 => 2.2.7 
      eslint-plugin-taro: 2.2.7 => 2.2.7 
      nerv-devtools: ^1.5.5 => 1.5.7 
      nervjs: ^1.5.5 => 1.5.7 
      stylelint-config-taro-rn: 2.2.7 => 2.2.7 
      stylelint-taro-rn: 2.2.7 => 2.2.7

[Chen-jj]

Duplicate of #7116

[footya]

遇到了同样的问题Taro 2.2.14

[EricWong1994]

@footya 朋友，这个问题你最后解决了没有？

[rayallen001]

用 <Canvas /> 代替 <canvas/> 试试，当然前提是：

import { Canvas } from '@tarojs/components';

<Canvas id="myCanvas" type="2d"/>

[Johnnnnboy]

wx换成Taro呢