Next.js条件样式
P粉596161915
P粉596161915 2023-08-10 16:17:51
[CSS3讨论组]
<p>如果路径与链接的href相匹配,我想使链接有效。</p>
 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>
 )
 }

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

P粉596161915
P粉596161915

全部回复(1)
P粉432930081

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

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号