当 useRef 元素的高度大于零时的事件

Posted 2023-02-25

【中文标题】当 useRef 元素的高度大于零时的事件

【英文标题】：Event when useRef element have height more than zero

【发布时间】：2020-10-09 12:12:57

【问题描述】：

我有很多照片缩略图，当列表加载时，我应该能够将其中一个缩略图滚动到视图中。

照片使用map 函数填充，其中一个缩略图的容器div 将被赋予ref。

我试过useEffect：

useEffect(() => 
    if (scrollRef.current && scrollRef.current instanceof htmlDivElement) 
        scrollRef.current.scrollIntoView(
            behavior: 'auto',
            block: 'center',
            inline: 'center',
        );
    
, [scrollRef.current]);

问题是ref或ref.current不能作为useEffect的依赖列表。我收到警告：

React Hook useEffect 有一个不必要的依赖： 'scrollRef.current'。排除它或删除依赖数组。 像“scrollRef.current”这样的可变值不是有效的依赖项 因为改变它们不会重新渲染组件

当ref.current 发生变化时，如何触发 useEffect 或其他一些功能？我所说的变化是指它的 clientHeight 值变化。因为一开始它是零，而scrollIntoView 还不能工作。

【参考方案1】：

使用callback ref。

function Example() 
    const [divRef, setDivRef] = useState(null);

    useEffect(() => 
        if (divRef && divRef.clientHeight > 0) 
            div.scrollIntoView(
                behavior: 'auto',
                block: 'center',
                inline: 'center',
            );
        
    , [divRef]);

    return <div ref=setDivRef />;