Taro: Taro Next 嵌套层级较深时，使用 selectorQuery 无法查询到子元素

[Miaonster]

相关平台

微信小程序

复现仓库

https://github.com/Miaonster/test-taro-comp-selector-query
小程序基础库: 2.12.1
使用框架: React

复现步骤

在上面提供的项目中，在 src/pages/index/index 中，分别获取了浅层 <View> 和深层 <View> 的 boundingClientRect，浅层的可以获取到 boundingClientRect，但是深层的获取不到。

import Taro from '@tarojs/taro'
import React, { Component } from 'react'
import { View } from '@tarojs/components'
import './index.css'

export default class Index extends Component {
  componentDidMount() {
    Taro.nextTick(() => {
      Taro.createSelectorQuery().select('.shallow').boundingClientRect(res => {
        console.log(res)
      }).exec()
      Taro.createSelectorQuery().select('.deep').boundingClientRect(res => {
        console.log(res)
      }).exec()
    })
  }

  render () {
    return (
      <View className='index'>
        <View className='shallow'>
          <View>
            <View>
              <View>
                <View>
                  <View>
                    <View>
                      <View>
                        <View>
                          <View>
                            <View>
                              <View>
                                <View>
                                  <View>
                                    <View>
                                      <View className='deep'>
                                        haha
                                      </View>
                                    </View>
                                  </View>
                                </View>
                              </View>
                            </View>
                          </View>
                        </View>
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

结果：

期望结果

期望可以使用 selectorQuery 获取页面中的深层元素的 boundingClientRect，或者有别的方式可以获取到深层元素也可以。

实际结果

无法获取深层元素的 boundingClientRect

环境信息

👽 Taro v3.0.7


  Taro CLI 3.0.7 environment info:
    System:
      OS: macOS 10.15.5
      Shell: 3.0.2 - /usr/local/bin/fish
    Binaries:
      Node: 14.3.0 - ~/.config/nvm/14.3.0/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.5 - ~/.config/nvm/14.3.0/bin/npm
    npmPackages:
      @tarojs/components: 3.0.7 => 3.0.7 
      @tarojs/mini-runner: 3.0.7 => 3.0.7 
      @tarojs/react: 3.0.7 => 3.0.7 
      @tarojs/runtime: 3.0.7 => 3.0.7 
      @tarojs/taro: 3.0.7 => 3.0.7 
      @tarojs/webpack-runner: 3.0.7 => 3.0.7 
      babel-preset-taro: 3.0.7 => 3.0.7 
      eslint-config-taro: 3.0.7 => 3.0.7 
      react: ^16.10.0 => 16.13.1 

[Chen-jj]

尴尬，这个受限于小程序本身，小程序社区是否有讨论或解决方案？

[Miaonster]

查到了，用 deep selector >>> 可以选中 <comp> 里面的元素

      Taro.createSelectorQuery().select('.shallow >>> .deep').boundingClientRect(res => {
        console.log(res)
      }).exec()

[Miaonster]

https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.select.html