时间戳

首页 > 解决方案 > 使用 useRef 和窗口调整大小事件（React Hook）的观察者 div 元素大小/维度

javascript - 使用 useRef 和窗口调整大小事件（React Hook）的观察者 div 元素大小/维度

问题描述

我正在尝试使用 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>

    );
}

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

标签： javascriptreactjsreact-hookswindow-resizeuse-ref

解决方案

如果您想使用 refs（或者甚至使用原始元素）来测量某些元素的大小，那么我推荐这个库： https ://github.com/ZeeCoder/use-resize-observer

如果你想专门测量窗口的大小，那么最好使用这样的东西：https ://github.com/jaredLunde/react-hook/tree/master/packages/window-size#readme

推荐阅读