使用 React Hooks 更新带滚动 [英] Using React Hooks To Update w/ Scroll

问题描述

我试图根据个人是否在组件上向下滚动来控制 React 组件的可见性.可见性作为in"属性传递到 Fade 元素.

I'm trying to control the visibility of a React Component based on whether an individual is scrolling down on the component. The visibility is passed into the Fade element as the "in" property.

我已经使用 UseEffect Hook 设置了一个侦听器，它添加了 onMount 侦听器.实际的 onScroll 函数应该更新 scrollTop 状态(它是到页面顶部的高度的当前值)，然后是滚动状态(将事件的滚动到页面顶部与之前的状态进行比较，以及如果第一个大于第二个，则返回 true).

I've set up a listener using the UseEffect Hook, which adds the listener onMount. The actual onScroll function is supposed to update the scrollTop state (which is the current value of the height to the top of the page) and then the scrolling state (which compares the event's scroll to the top of the page with the previous state, and if the first is greater than the second, returns true).

但是，由于某种原因 setScrollTop 钩子不起作用，滚动状态继续保持在 0.

However, for some reason the setScrollTop hook isn't working, and the scrolling state continues to stay at 0.

我做错了什么?这是完整的组件:

What am I doing wrong? Here's the full component:

export const Header = (props) => {

  const classes = useStyles();

  const [scrolling, setScrolling] = useState(false);
  const [scrollTop, setScrollTop] = useState(0);

  const onScroll = (e) => {
    setScrollTop(e.target.documentElement.scrollTop);
    setScrolling(e.target.documentElement.scrollTop > scrollTop);
  }

  useEffect(() => {
    window.addEventListener('scroll', onScroll);
  },[]);

  useEffect(() => {
    console.log(scrollTop);
  }, [scrollTop])

  return (
   <Fade in={!scrolling}>
      <AppBar className={classes.header} position="fixed">

  ....

推荐答案

您的钩子中缺少依赖项.试试这个:

You're missing the dependencies in your hook. Try this:

  useEffect(() => {
    const onScroll = e => {
      setScrollTop(e.target.documentElement.scrollTop);
      setScrolling(e.target.documentElement.scrollTop > scrollTop);
    };
    window.addEventListener("scroll", onScroll);

    return () => window.removeEventListener("scroll", onScroll);
  }, [scrollTop]);

通过将 onScroll 移动到 useEffect 中，您不需要在钩子的依赖项上跟踪它，但是因为它使用 scrollTop from组件的范围，您需要添加它.

By moving onScroll inside the useEffect, you don't need to track it on the hook's dependencies, however since it uses scrollTop from the component's scope, you'll need to add it.

或者，如果由于某种原因您不想在 useEffect 中移动 onScroll 定义，则需要包装 onScroll在 useCallback 中并在 useEffect 的依赖数组中跟踪它.

Alternatively, if for some reason you don't want to move onScroll definition inside the useEffect, you'll need to wrap onScroll in useCallback and track it in useEffect's dependency array.

总的来说，我建议将 react-hooks/exhaustive-deps 添加到您的 ESlint 规则

In general I'd recommend adding react-hooks/exhaustive-deps to your ESlint rules

在清理函数中删除事件监听器也是一个好主意.

Also it's a good idea to remove the event listener in cleanup function.

这篇关于使用 React Hooks 更新带滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！