Question

因此，我希望每次调用组件时都执行滚动操作，如果直接加载该组件，则会执行该操作。但是，如果我从其他地方导航到该组件，则滚动过程将无法进行。为什么？

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop);

const OrderList = props => {
  const topRef = useRef(null);

  useEffect(() => {
    scrollToRef(topRef);
  },[]);

  return (
    <>
    <div style={{height:1500}} />
    <div ref={topRef} id="top">I wanna see.</div>
    </>
  );
}

Answer 1

可能是竞争条件，在组件初始化时调用效果，稍后设置ref。更好的方法是：

const scrollToComp = el => el && window.scrollTo(0, el.offsetTop);

然后

<div ref={scrollToComp}>...</div>

Answer 2

如果将空数组作为第二个参数传递给useEffect，它将不会跟踪组件中的任何变量，并且只会在其中触发函数。

official React docs中的更多信息。

Answer 3

但是，如果我从其他地方导航到该组件，则滚动过程将无法进行。为什么？

因为导航不会重新渲染组件。

您需要在prop上传递一些导航useEffect，以便当导航更改页面时，它将再次运行效果。

请指定您正在使用的导航。

为什么window.scrollTo操作仅在初始页面加载时触发？

3 个答案: