0

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

照片填充有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还不起作用。

4

1 回答 1

0

使用回调 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} />;
}
于 2020-10-20T14:10:23.117 回答