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

Question

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

照片填充有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'这样的可变值不是有效的依赖关系，因为改变它们不会重新渲染组件

更改时如何触发 useEffect 或其他功能ref.current？我所说的变化是指它的 clientHeight 值变化。因为最初它为零，并且scrollIntoView还不起作用。

标签： javascriptreactjstypescriptreact-hooksuse-ref

Answer 1

使用回调 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} />;
}