使用useRef addEventListener

Question

我使用

useRef

代替

addEventListener

但不起作用，这里出了什么问题吗？

父组件：

const parent = () => {
  const el = useRef()
  const element = el.current && el.current 

  useEffect(() => {
    if (element) {
      const scrollHandler = e => {
        console.log(e);
      };

      element.addEventListener("scroll", scrollHandler);

      return () => {
        element.removeEventListener("scroll", scrollHandler);
      };
    }
  }, [element]);

  return (
    <Child ref={el} />
  )
}

子组件：

const child = React.forwardRef((props, ref) => {
  return (
    <div ref={ref}>something...</div>
  )
})

Answer 1

基于

React Hook Flow

，将在渲染子项并设置

useEffect

后调用

refs

，因此您应该能够清空

useEffect

依赖项，并且仍然有正在设置的

ref

。 [![在此处输入图像描述][1]][1]

也请查看 Dan 的评论，这可能有助于澄清正在发生的事情：https://github.com/facebook/react/issues/14387#issuecomment-503616820

还创建了这个codesandbox，您可以使用代码来看看我在说什么：https://codesandbox.io/p/sandbox/elastic-cache-jgv7xw 将您的父组件更改为此以避免获得

stale state

:

const parent = () => {
  const el = useRef();

  useEffect(() => {
    if (el.current) {
      const scrollHandler = (e) => {
        console.log(e);
      };

      el.current.addEventListener("scroll", scrollHandler);

      return () => {
        el.current.removeEventListener("scroll", scrollHandler);
      };
    }
  }, []);

  return <Child ref={el} />;
};


  [1]: https://i.stack.imgur.com/YxEQ4.jpg