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

admin管理员组

文章数量:1328949

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();

• javascript
• reactjs
• next.js
• gsap
• use-ref

Share Improve this question Follow edited Jan 23, 2021 at 19:57 Zsolt Meszaros 23.2k1919 gold badges5757 silver badges6969 bronze badges asked Jan 22, 2021 at 23:34 Rom-888Rom-888 87622 gold badges1414 silver badges3434 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: 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>

本文标签： javascriptCorrect way to use ref with Nextjs for a Link and an ltagtStack Overflow