Next.js条件样式

Question

<p>如果路径与链接的href相匹配，我想使链接有效。</p>
<pre><code> function Component() {
 const pathname = usePathname();
  return (
      <div className="links">
        <Link href="/">首页</Link>
        <Link href="/store" className={`${pathname === this.href && "active"}`} >商店</Link>
        <Link href="/actors">演员</Link>
      </div>
 )
 }</code>

我尝试了这个，但不幸的是没有起作用。我能做这样的事吗？

Answer 1

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

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

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