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

debugcn 发表于 Dev

user6098045_

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

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

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

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

我是反应的初学者，所以我确定我会走错路线了。有人可以帮忙吗？

已完成

这里的问题是，当路线更改时，不需要更新游标组件，因此不会调用useEffect挂钩。这就是为什么您的听众未附加到更改路线时出现的新锚标签的原因。

但是，React Router Dom引入了一个名为useLocation的新钩子，您可以使用该钩子来响应路由更改。该钩子返回当前的url，因此当您将其传递给如下所示的数组时，每次url更改时都会调用useEffect，因此它将您的侦听器附加到最近呈现的锚标记上

将此添加到您的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]);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。