渲染后获取 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

我认为您的代码可以正常工作。这是一个简短的 Typescript 实现来展示我的观点：

...

const ref = useRef<HTMLDivElement>();
    return (
        <div ref={ref as MutableRefObject<HTMLDivElement>}>
            <button onClick={() => console.log('REF', ref?.current?.clientWidth)}>TEST</button>
        </div>
    );

...

调整大小前单击按钮的控制台结果： [![在此处输入图片描述][1]][1]

调整大小后单击按钮的控制台结果： [![在此处输入图片描述][2]][2]

我猜你看不到变化的原因是你在这里有一个只运行一次的使用效果。另请注意，ref 对象中的更改不会自动触发 re-render。 [1]: https://i.stack.imgur.com/uCmz4.png [2]: https://i.stack.imgur.com/cWpVM.png

Answer 2

您可以使用 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>
  );
}

渲染后获取 div 的动态宽度

Getting dynamic width of div after rendering

javascript

flexbox

reactjs

react-hooks

use-ref