小编fun*_*gus的帖子

我有一些重复的悬停状态，运行一个函数来显示一些空或填充的图标（就像您在一些带有空/填充购物车的电子商务网站中看到的那样）。作为实践，我想创建并将其放入自定义的hoverHooks组件中，并useRef运行useEffect一些add/remove事件监听器，如下所示：

const ref = useRef(null)
function enter() {
  setHover(true)
}
function leave() {
  setHover(false)
}

useEffect(() => {
  ref.current.addEventListener('mouseenter',enter)
  ref.current.addEventListener('mouseleave', leave)
 return () => {
   ref.current.removeEventListener('mouseenter',enter)
   ref.current.removeEventListener('mouseleave',leave)
}
})

我这样做是为了让保存我的图标的容器可以拥有 ，而ref={ref}无需我重复编写onMouseEnter / onMouseLeave. （我猜我的参考文献正在重复，但最好是三个字母，并将我的悬停移动state到一个地方。removeEventListener我得到的是无法读取 null 的属性“”。我在“潜在问题”下阅读了有关此问题的 React 17 文档。 “但他们的建议不起作用（通过将可变数据存储到变量中来捕获可变数据）。

useEffect(() => {
  const myRef = ref.current

  myRef.current.addEventListener('mouseenter',enter)
  myRef.current.addEventListener('mouseleave', leave)
 return () => {
   myRef.current.removeEventListener('mouseenter',enter)
   myRef.current.removeEventListener('mouseleave',leave)
}
})

任何和所有的建议将不胜感激！谢谢