英文:

Next.js conditional style

问题 {#heading}

我想要如果路径名与其href匹配，则使链接变为活动状态。

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>
 )}

这是我尝试过的，但不幸的是它不起作用。我能做类似的事情吗？ 英文:

I want to make a link active if the pathname matches its href.

function Component() {
 const pathname = usePathname();
  return (
      <div className="links">
        <Link href="/">Home</Link>
        <Link href="/store" className={`${pathname === this.href && "active"}`} >Store</Link>
        <Link href="/actors">Actors</Link>
      </div>
 )}

That's what I tried but unfortunately it doesn't work. Can I do something like that?

答案1 {#1}

得分: 2

你不能在函数组件中使用 this，它只能在类组件中访问。为了实现你想要的效果，你只需要手动编写它，例如：

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

同时，不要在 className 中使用 &&，因为如果条件为 false，它会在你的 className 中添加 false，所以请改用带有空字符串的三元运算符。 英文:

You can't use this in functional components that is only accessible in class components. And to achieve that you want, you would simply have to write it manually, like:

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

Also don't use && in className, cause it would add false in your className if your condition is false, so instead add ternary operator with "" in false condition.

答案2 {#2}

得分: 1

除了Rao Asim所说的之外，为了避免重复，将它们制作成一个数组，然后.map遍历该数组。

function Component() {
  const pathname = usePathname();
  return (
    <div className="links">
      {[
        { label: "Home", href: "/" },
        { label: "Store", href: "/store" },
        { label: "Actors", href: "/actors" },
      ].map(({ label, href }) => (
        <Link
          key={label}
          href={href}
          className={pathname === href ? "active" : ""}
        >
          {label}
        </Link>
      ))}
    </div>
  );
}

为了更好的可读性，你可以将数组声明移出JSX：

function Component() {
  const pathname = usePathname();

  const navElements = [
    { label: "Home", href: "/" },
    { label: "Store", href: "/store" },
    { label: "Actors", href: "/actors" },
  ];

  return (
    <div className="links">
      {navElements.map(({ label, href }) => (
        <Link
          key={label}
          href={href}
          className={pathname === href ? "active" : ""}
        >
          {label}
        </Link>
      ))}
    </div>
  );
}

英文:

Additionally to what Rao Asim said. to avoid repeating make them as an array then .map over the array.

function Component() {
 const pathname = usePathname();
  return (
      <div className="links">
        {[
          { label: "Home", href: "/" },
          { label: "Store", href: "/store" },
          { label: "Actors", href: "/actors" },
        ].map(({label, href}) => (
          <Link 
            key={label} 
            href={href}
            className={pathname === href ? "active" : ""}
           >{label}</Link>
        ))}
      </div>
 )}

For better readability, you can move the array declaration out of the JSX:

function Component() {
  const pathname = usePathname();

  const navElements = [
    { label: "Home", href: "/" },
    { label: "Store", href: "/store" },
    { label: "Actors", href: "/actors" },
  ]

  return (
      <div className="links">
        {navElements.map(({label, href}) => (
          <Link 
            key={label} 
            href={href}
            className={pathname === href ? "active" : ""}
           >{label}</Link>
        ))}
      </div>
 )}