reactjs - 如何根据状态渲染动画？

Question

我有一个导航栏，我需要使用React Anime. Navbar 包含Link组件，它获取delay和duration作为道具。

这是导航栏的代码：

import React, {useContext, useState} from 'react'
import Link from '../Link'
import ImageLink from '../ImageLink'
import styles from './Navigation.module.css'
import { ThemeContext } from '../../theme'


let isPassed= false

export default function Navigation() {

    const theme = useContext(ThemeContext)

    return (
        <div className={styles.root} style={{"--height-after": 6 + 'px'}}>
            <div>
                <ImageLink
                    href="/"
                    alt="logo"
                    src={theme.name === 'light' ? '/images/logo/Logo.svg' : '/images/logo/LogoBlack.svg'}
                    className={styles.logo}
                    delay={3200}
                />
            </div>
            <div className={styles.item}>
                <Link
                    href="/contact"
                    duration={isPassed}
                    delay={2100}
                >
                    Contact
                </Link>
            </div>
            <div className={styles.item}>
                <Link
                    href="/about"
                    duration={isPassed === false ? 1500 : 0}
                    delay={2300}
                >
                    About us
                </Link>
            </div>
            <div className={styles.item}>
                <Link
                    href="/trails"
                    duration={isPassed === false ? 1500 : 0}
                    delay={2500}
                >
                    All trails
                </Link>
            </div>
        </div>
    )
}

这是 Link 组件的代码：

import React from 'react'
import styles from './Link.module.css'
import NextLink from 'next/link'
import Anime from "react-anime";


export default function Link({ href, children, className, delay, duration }) {

    return (
        <Anime
            translateY={[-15,0]}
            opacity={[0,1]}
            duration={duration}
            delay={delay}
        >
            <NextLink href={href}>
                <a className={styles.link + ' ' + className}>{children}</a>
            </NextLink>
        </Anime>
    )
}

任务是处理动画状态，如果动画已经在当前浏览器会话中传递，则不在页面重新加载时对其进行动画处理。

我的第一个想法是使用sessionStorage，但后来我决定isPassed在导航栏组件中声明一个新变量，并根据其值对链接进行动画处理。所以......我可以isPassed在动画传递时以某种方式改变值吗