如何在反应中实现自定义光标组件

【问题标题】：How to implement a custom cursor component in react如何在反应中实现自定义光标组件
【发布时间】：2020-08-22 11:49:22
【问题描述】：

我正在尝试根据这篇文章制作自定义光标组件：https://dev.to/andrewchmr/awesome-animated-cursor-with-react-hooks-5ec3

我正在使用 react router dom，问题是悬停事件仅在初始页面加载时或刷新页面后对路由器组件内的内容起作用。

然而，悬停总是在导航组件链接上工作。我设置了一个基本的 CodeSandbox，您可以在其中看到悬停在导航链接上的工作方式，但在页面内容链接上却看不到（在初始页面加载后和页面之间导航时）。

https://codesandbox.io/s/dazzling-newton-u9hk5

我是 react 的初学者，所以我确定我做错了。有人可以帮忙吗？

【问题讨论】：

标签： reactjs react-router event-handling react-hooks addeventlistener

【解决方案1】：

这里的问题是当路由改变时，你的 Cursor 组件 不需要更新，因此 useEffect 钩子不会被调用。这就是为什么您的听众不会附加到您更改路由时出现的新锚标记的原因。

但是，React Router Dom 引入了一个名为 useLocation 的新钩子，您可以使用它来响应路由更改。这个钩子返回当前的 url，所以当你将它传递给如下数组时，useEffect 会在每次 url 改变时被调用，因此它会将你的监听器附加到最近渲染的锚标签

将此添加到您的光标组件：

import { useLocation } from "react-router-dom";

// then in your functional component

  const location = useLocation();

  useEffect(() => {
    addEventListeners();
    handleLinkHoverEvents();
    return () => removeEventListeners();
    // eslint-disable-next-line
  }, [location]);

【讨论】：

是的！那成功了。非常感谢您的帮助。