将 ref 与 Next.js 一起用于 Link 和 <a> 的正确方法？

Question

我正在尝试使用 GSAP 为菜单元素制作动画。

我正在使用像 useRef 这样的钩子，它可以很好地与链接到外部网站的 <a> 元素一起使用，但不适用于内部路由的 <Link> 元素。

菜单：

<nav>
    <ul>
        <li>
            <Link
              onMouseEnter={e => handleHover(e)}
              onMouseOut={e => handleHoverExit(e)}
              ref={line1} href="/nouveautes"> Nouveautés</Link>
        </li>
        <li>
            <Link
              onMouseEnter={e => handleHover(e)}
              onMouseOut={e => handleHoverExit(e)} ref={line2} href="/catalogue"> Catalogue</Link>
        </li>
        <li>
            <a
               onMouseEnter={e => handleHover(e)}
               onMouseOut={e => handleHoverExit(e)} ref={line3} 
               href="https://shop.paradisepapers.fr/"> Diffusion</a>
        </li>
        <li>
            <Link
              onMouseEnter={e => handleHover(e)}
              onMouseOut={e => handleHoverExit(e)} ref={line4} 
              href="/contacts"> Contacts</Link>
        </li>
        <li>
            <a
              onMouseEnter={e => handleHover(e)}
              onMouseOut={e => handleHoverExit(e)} ref={line5} 
              href="https://cmeditions.us17.list-manage.com/subscribe/post?u=385cdf2c81c2f3bdd2ff1583e&amp;id=fa0ff0c34e"> Newsletter</a>
        </li>
    </ul>
</nav>

GSAP 职能：

const handleHover = e => {
    gsap.to(e.target, {
      duration: 0.3,
      y: 3,
      skewX: 4,
      ease: 'power3.inOut'
    });
};

const handleHoverExit = e => {
    gsap.to(e.target, {
      duration: 0.3,
      y: -3,
      skewX: 0,
      ease: 'power3.inOut'
    });
}

使用参考：

let line1 = useRef();
let line2 = useRef();
let line3 = useRef();
let line4 = useRef();
let line5 = useRef();

Answer 1

next/link 组件仍然需要您将子元素传递给它。您可以将 <a> 作为子项添加到您的 <Link>，然后对它们应用 ref 和回调。

<nav>
    <ul>
        <li>
            <Link href="/nouveautes">
                <a onMouseEnter={e => handleHover(e)} onMouseOut={e => handleHoverExit(e)} ref={line1}>
                    Nouveautés
                </a>
            </Link>
        </li>
        <!-- remaining code -->
    </ul>
</nav>

将 ref 与 Next.js 一起用于 Link 和 <a> 的正确方法？

Correct way to use ref with Next.js for a Link and an <a>?

javascript

reactjs

next.js

gsap

use-ref