渲染后获取div的动态宽度

Question

我想获取动态 div 绘制后的宽度，但我不知道如何实现。这就是我正在做的：

const ref=useRef();
useEffect(()=>{
console.log('REF',ref.current.offSetWidth)
},[])



return (
<div ref={ref}>


</div>

我尝试了 window.resize eventListener，但只有在屏幕尺寸发生变化时才会触发它。我的问题是，在屏幕上渲染后，是否可以获取 div 的宽度？我没有预先设置宽度，它只是在弹性框中占据父元素的 100%

Answer 1

您可以使用ResizeObserver，React 的一个简单实现可能如下所示：

import {useRef, useEffect} from 'react'

export default function App() {
  const divRef = useRef()

  useEffect(() => {
    new ResizeObserver(() => {
      console.log('Width: ', divRef.current.clientWidth)
    }).observe(divRef.current)
  }, [])

  return (
    <div ref={divRef}>
    </div>
  );
}