时间戳

首页 > 解决方案 > 获取与窗口相关的元素顶部偏移量

reactjs - 获取与窗口相关的元素顶部偏移量

问题描述

我正在尝试实现将返回元素的 offsetTop 的钩子。这是需要将一些样式应用到它粘在顶部的标题。

import { useState, useEffect } from 'react';

interface ElementPosition {
    left: number | undefined;
    right: number | undefined;
    top: number | undefined;
    bottom: number | undefined;
}

export const useElementPosition = (ref: any): ElementPosition => {
    const [position, setPosition] = useState<ElementPosition>({
        left: undefined,
        right: undefined,
        top: undefined,
        bottom: undefined,
    });

    useEffect(() => {
        if (ref.current) {
            setPosition({
                top: ref.current.offsetTop,
                bottom: ref.current.offsetBottom,
                left: ref.current.offsetLeft,
                right: ref.current.offsetRight,
            });
        }
    }, [ref.current]);

    return position;
};

但现在我记得ref.current更改不会触发 useEffect 所以我只能获得初始偏移量。有没有办法以可重用的方式做到这一点hooks？

标签： reactjstypescriptreact-hooksnext.js

解决方案

对于这种情况，您可以改用回调ref。ref当附加到新节点时，将调用回调。

export const useElementPosition = () => {
    const [position, setPosition] = useState<ElementPosition>({
        left: undefined,
        right: undefined,
        top: undefined,
        bottom: undefined
    });

    const ref = useCallback((node) => {
        if (node !== null) {
            setPosition({
                top: node.offsetTop,
                bottom: node.offsetBottom,
                left: node.offsetLeft,
                right: node.offsetRight
            });
        }
    }, []);

    return [position, ref];
}

在这种情况下，不是将 a 传递ref给自定义钩子，而是ref从它返回要使用的。

const PositionExample = () => {
    const [position, ref] = useElementPosition();
    console.log(position.top);
    return (
        <h1 ref={ref}>Hello world!</h1>
    );
};

有关更多详细信息，请查看官方文档：React Hooks - How can I measure a DOM node? .

推荐阅读