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

Posted 2023-02-22

【中文标题】获取与窗口相关的元素顶部偏移量

【英文标题】：Get elements top offset related to window

【发布时间】：2021-11-20 04:16:38

【问题描述】：

我正在尝试实现将返回元素的 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 这样以可重用的方式做到这一点？

【问题讨论】：

查看medium.com/@teh_builder/…

【参考方案1】：

对于这种情况，您可以改用callback 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];

在这种情况下，您无需将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?。