react 的 useRef 怎么获取dom的宽高？

Question

场景：使用taro框架，react hooks语法开发小程序，useRef获取dom的方式无法获取dom的宽高。

demo如下

const infoWrap = useRef(null);

useEffect(() => {
    setTimeout(() => {
        if (infoWrap.current) {
            console.log(infoWrap.current.style.height)
        }
    }, 200)
}, [])

return (
     <View ref={infoWrap} className="info"></View>
)

求教useRef该怎么获取dom宽高呢？

Answer 1

可以尝试以下写法试试哦，不一定有效，我在 pc 端是这样的写法

useEffect(() => {
    if (infoWrap.current) {
        console.log(infoWrap.current.offsetWidth);
        console.log(infoWrap.current.offsetHeight);
        console.dir(infoWrap.current, '查看元素完整信息');
    }
}, [infoWrap.current])

Answer 2

小程序获取节点信息有特殊的api

Answer 3

import Taro, { useEffect, useRef } from '@tarojs/taro'
import { View } from '@tarojs/components'

export default function MyComponent() {
  const infoWrap = useRef(null)

  useEffect(() => {
    setTimeout(() => {
      const query = Taro.createSelectorQuery()
      query.select('.info').boundingClientRect()
      query.exec((res) => {
        console.log('height:', res[0].height)
        console.log('width:', res[0].width)
      })
    }, 200)
  }, [])

  return (
    <View ref={infoWrap} className="info"></View>
  )
}