Next.js条件样式

huangapple
go评论143阅读模式
英文:

Next.js conditional style

问题

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

  1. function Component() {
  2.  const pathname = usePathname();
  3.   return (
  4.       <div className="links">
  5.         <Link href="/">首页</Link>
  6.         <Link href="/store" className={`${pathname === this.href && "active"}`}>商店</Link>
  7.         <Link href="/actors">演员</Link>
  8.       </div>
  9.  )}

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

英文:

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

  1. function Component() {
  2.  const pathname = usePathname();
  3.   return (
  4.       &lt;div className=&quot;links&quot;&gt;
  5.         &lt;Link href=&quot;/&quot;&gt;Home&lt;/Link&gt;
  6.         &lt;Link href=&quot;/store&quot; className={`${pathname === this.href &amp;&amp; &quot;active&quot;}`} &gt;Store&lt;/Link&gt;
  7.         &lt;Link href=&quot;/actors&quot;&gt;Actors&lt;/Link&gt;
  8.       &lt;/div&gt;
  9.  )}

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

答案1

得分: 2

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

  1. <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:

  1. &lt;Link href=&quot;/store&quot; className={`${pathname === &quot;/store&quot; ? &quot;active&quot;:&quot;&quot;}`} &gt;Store&lt;/Link&gt;

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

得分: 1

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

  1. function Component() {
  2.   const pathname = usePathname();
  3.   return (
  4.     <div className="links">
  5.       {[
  6.         { label: "Home", href: "/" },
  7.         { label: "Store", href: "/store" },
  8.         { label: "Actors", href: "/actors" },
  9.       ].map(({ label, href }) => (
  10.         <Link
  11.           key={label}
  12.           href={href}
  13.           className={pathname === href ? "active" : ""}
  14.         >
  15.           {label}
  16.         </Link>
  17.       ))}
  18.     </div>
  19.   );
  20. }

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

  1. function Component() {
  2.   const pathname = usePathname();
  4.   const navElements = [
  5.     { label: "Home", href: "/" },
  6.     { label: "Store", href: "/store" },
  7.     { label: "Actors", href: "/actors" },
  8.   ];
  10.   return (
  11.     <div className="links">
  12.       {navElements.map(({ label, href }) => (
  13.         <Link
  14.           key={label}
  15.           href={href}
  16.           className={pathname === href ? "active" : ""}
  17.         >
  18.           {label}
  19.         </Link>
  20.       ))}
  21.     </div>
  22.   );
  23. }
英文:

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

  1. function Component() {
  2.  const pathname = usePathname();
  3.   return (
  4.       &lt;div className=&quot;links&quot;&gt;
  5.         {[
  6.           { label: &quot;Home&quot;, href: &quot;/&quot; },
  7.           { label: &quot;Store&quot;, href: &quot;/store&quot; },
  8.           { label: &quot;Actors&quot;, href: &quot;/actors&quot; },
  9.         ].map(({label, href}) =&gt; (
  10.           &lt;Link 
  11.             key={label} 
  12.             href={href}
  13.             className={pathname === href ? &quot;active&quot; : &quot;&quot;}
  14.            &gt;{label}&lt;/Link&gt;
  15.         ))}
  16.       &lt;/div&gt;
  17.  )}

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

  1. function Component() {
  2.   const pathname = usePathname();
  4.   const navElements = [
  5.     { label: &quot;Home&quot;, href: &quot;/&quot; },
  6.     { label: &quot;Store&quot;, href: &quot;/store&quot; },
  7.     { label: &quot;Actors&quot;, href: &quot;/actors&quot; },
  8.   ]
  10.   return (
  11.       &lt;div className=&quot;links&quot;&gt;
  12.         {navElements.map(({label, href}) =&gt; (
  13.           &lt;Link 
  14.             key={label} 
  15.             href={href}
  16.             className={pathname === href ? &quot;active&quot; : &quot;&quot;}
  17.            &gt;{label}&lt;/Link&gt;
  18.         ))}
  19.       &lt;/div&gt;
  20.  )}

huangapple
  • 本文由 发表于 2023年8月10日 21:55:21
  • 转载请务必保留本文链接：https://go.coder-hub.com/76876418.html
  • css
  • next.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定