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

Question

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

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

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

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

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

Answer 1

这里的问题是，当路由发生变化时，您的光标组件不需要更新，因此不会调用useEffect hook。这就是为什么您的听众没有附加到您更改路线时出现的新锚标记的原因。

但是，React Router Dom 引入了一个名为 useLocation 的新钩子，您可以使用它来响应路由更改。这个 hook returns current url，所以当你像下面这样把它传递给数组时，useEffect 会在每次 url 改变时被调用，因此它会将您的听众附加到最近呈现的锚标记

将此添加到您的 Cursor 组件：

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

// then in your functional component

  const location = useLocation();

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

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

How to implement a custom cursor component in react

event-handling

addeventlistener

reactjs

react-router

react-hooks