Styles conditionnels Next.js

Question

<p>Je souhaite rendre le lien valide si le chemin correspond au href du lien. </p>
<pre><code> function Composant() {
 const chemin d'accès = usePathname();
  retour (
      <div className="liens">
        <Link href="/">Page d'accueil</Link>
        <Link href="/store" className={`${pathname === this.href && "active"}`} >store</Link>
        <Link href="/actors">Acteurs</Link>
      </div>
 )
 }</code>

J'ai essayé cela mais malheureusement cela n'a pas fonctionné. Puis-je faire quelque chose comme ça ?

Answer 1

Vous ne pouvez pas utiliser this dans un composant fonctionnel accessible uniquement au sein d'un composant de classe. Pour obtenir l'effet souhaité, il vous suffit d'écrire le code manuellement, par exemple :

<Link href="/store" className={`${pathname === "/store" ? "active":""}`} >商店</Link>

Faites également attention à ne pas utiliser && dans className, car si la condition n'est pas vraie, cela ajoutera false à votre className, vous pouvez donc utiliser l'opérateur ternaire pour ajouter "" lorsque la condition est fausse.