最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin6浏览0评论

I'm trying to animate the elements of a menu with GSAP.

I'm using hooks like useRef and it works fine with the <a> elements which are links to an external website but not for the <Link> elements for internal routes.

Menu:

<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="/"> 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=";amp;id=fa0ff0c34e"> Newsletter</a>
        </li>
    </ul>
</nav>

The GSAP functions:

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'
    });
}

useRef:

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

I'm trying to animate the elements of a menu with GSAP.

I'm using hooks like useRef and it works fine with the <a> elements which are links to an external website but not for the <Link> elements for internal routes.

Menu:

<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./subscribe/post?u=385cdf2c81c2f3bdd2ff1583e&amp;id=fa0ff0c34e"> Newsletter</a>
        </li>
    </ul>
</nav>

The GSAP functions:

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'
    });
}

useRef:

let line1 = useRef();
let line2 = useRef();
let line3 = useRef();
let line4 = useRef();
let line5 = useRef();
Share Improve this question edited Jan 23, 2021 at 19:57 Zsolt Meszaros 23.2k19 gold badges57 silver badges69 bronze badges asked Jan 22, 2021 at 23:34 Rom-888Rom-888 8762 gold badges14 silver badges34 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 4

next/link ponent still requires you to pass a child element to it. You can add <a>'s as children to your <Link>'s, then apply the ref and callbacks to them.

<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>
发布评论

评论列表(0)

  1. 暂无评论