1

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

    );
}

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

4

1 回答 1

0

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

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

于 2020-11-15T13:57:25.367 回答