Bedingte Stile von Next.js

Question

<p>Ich möchte den Link gültig machen, wenn der Pfad mit der href des Links übereinstimmt. </p>
<pre><code> function Component() {
 const Pfadname = usePathname();
  zurückkehren (
      <div className="links">
        <Link href="/">Startseite</Link>
        <Link href="/store" className={`${pathname === this.href && "active"}`} >store</Link>
        <Link href="/actors">Schauspieler</Link>
      </div>
 )
 }</code>

Ich habe es versucht, aber leider hat es nicht funktioniert. Kann ich so etwas tun?

Answer 1

在只能在类组件中访问的功能组件中，你不能使用this。要实现你想要的效果，你只需要手动编写代码，例如：

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

还要注意在className中不要使用&&，因为如果条件不成立，它会向你的className中添加false，所以可以使用三元运算符，在条件为false时添加""。