使用useRef和窗口调整大小事件(React Hook)，观察div元素的尺寸/尺度。

Question

我试图使用 React Hook JS 不断地观察/检测一个 div 元素的大小。我已经尝试了不同的方法，但每次都会出现这样的一个常见问题：缩小窗口大小时，ref.current.offsetWidth 不会改变，但增大窗口时，它将会改变 ref.current.offsetWidth 的值。

以下是我的代码：

function Chart({}) {
    const targetRef = useRef(null);
    const [dimensions, setDimensions] = useState({width: 0, height: 0});

    const updateDimensions = debounce(() => {
        if(targetRef.current) {
            setDimensions({
                width: targetRef.current.offsetWidth,
                height: targetRef.current.offsetHeight
            });
        }
    }, 50);

    useEffect(() => {
        updateDimensions();
    }, []);

    useEffect(() => {
        window.addEventListener("resize", updateDimensions);
        updateDimensions();
        return () => {
            window.removeEventListener("resize", updateDimensions);
        };
    }, []);

    return (
        <div style={{minHeight: 250}} ref={targetRef}>
           <some svg component/>
        </div>

    );
}

注意: 重新渲染整个应用程序将更新尺寸，但我不想刷新整个页面以获得正确的尺寸。

- Samira Arabgol

---

这是你想要的吗？链接 - Yousaf

这几乎就是我正在做的，但我的应用程序仍然存在同样的问题。 - Samira Arabgol

我有一种预感，div的样式意味着在窗口调整大小时呈现的大小不会改变，因此offsetWidth和offsetHeight不会改变。作为测试，如果您将height: "100vh", width: "100vw"添加到您的样式属性中，您是否会看到尺寸发生变化？ - peteredhead

Answer 1

如果您想使用 refs（或甚至是原始元素）来测量某些元素的大小，则我建议使用此库：https://github.com/ZeeCoder/use-resize-observer 如果您想特别测量窗口的大小，则最好使用类似于这样的东西：https://github.com/jaredLunde/react-hook/tree/master/packages/window-size#readme

- ZeeCoder