搜索了大家伙的提问，没有得到一个比较贴合我这边实际情况的答案。

我是使用TARO在实现一个自定义tabbar,用的是函数组件的写法。

我尝试用createSelectorQuery去查询，得到的结果始终是null，我的代码如下。

请问有下伙伴有碰到类似情况吗？

import React, {
  useState, useEffect, useLayoutEffect, useRef, Component,
} from 'react'
import { View, Text, CoverView } from '@tarojs/components'
import Taro, { createSelectorQuery, useReady } from '@tarojs/taro'
import config from '../app.config'
import IconFont from '../assets/iconfont'
import styles from './index.module.less'
import { MobXProviderContext, observer } from 'mobx-react'
import { StoreType } from '@/app'

function CustomTabBar(props) {
  const { store } = React.useContext<{ store:StoreType }>(MobXProviderContext as any)


  const { systemStore } = store
  const pages = Taro.getCurrentPages()
  const currentPage = pages[0]


  const [activeIndex, setActiveIndex] = useState(0)
  const menuList = config.tabBar.list


  // 切换tab
  const onSwitchTab = (url) => {
    Taro.switchTab({
      url,
    })
  }


  // 处理bar的active
  useEffect(() => {
    const index = menuList.findIndex((item) => item.pagePath === currentPage.route)
    if (index > -1) {
      setActiveIndex(index)
    }
  }, [currentPage.route])

//！！！！就是在这里尝试测量，但始终得到的是null. 有搜索到的答案说是要执行.in(this), 但这里是一个函数组件，this应该是无效的。
  useEffect(() => {
    setTimeout(() => {
      createSelectorQuery()
        .select('#custom-tabbar')
        .boundingClientRect((rect) => {
          console.log(rect, 'test....') //为null
        })
        .exec()
    }, 500) // 加了延时也不行
  }, [])


// 渲染TAB
  const renderMenu = () => menuList.map((menuItem, menuIndex) => (
        <View
          key={menuItem.pagePath}
          className={`${styles.tabBarItem} ${activeIndex === menuIndex ? 'active' : ''}`}
          onClick={() => { onSwitchTab(`/${menuItem.pagePath}`) }}
        >
          <IconFont name={(activeIndex === menuIndex ? menuItem.activeIcon : menuItem.icon) as any} size={32} color={activeIndex === menuIndex ? config.tabBar.selectedColor : config.tabBar.color} />
          <Text style={{ color: activeIndex === menuIndex ? config.tabBar.selectedColor : config.tabBar.color }}>
          {menuItem.text}
          </Text>
        </View>
  ))


  return (
    <View id="custom-tabbar" >
      {renderMenu()}
    </View>
  )
}