在 Reactjs/Nextjs 中选择时如何加粗导航项

Posted 2023-02-22

【中文标题】在 Reactjs/Nextjs 中选择时如何加粗导航项

【英文标题】：How to bold a navigation item when selected in Reactjs/Nextjs

【发布时间】：2020-10-28 03:29:35

【问题描述】：

我有一个 react/nextjs 应用程序，并且可以使用 Home|account|Jobs 进行导航。我如何加粗主动。当用户从导航中选择项目时

这里是我的导航sn-p

class Header extends React.Component 

    render() 
    
        <ListItem>              
           <Link prefetch href="/jobseeker/home">
               <a>home</a>
            </Link>                  
        </ListItem>
        <ListItem>              
           <Link prefetch href="/jobseeker/account">
               <a>account</a>
            </Link>                  
        </ListItem>
        <ListItem>              
           <Link prefetch href="/jobseeker/jobs">
               <a>jobs</a>
            </Link>                  
        </ListItem>
    

【问题讨论】：

我认为这里的答案应该有所帮助：***.com/questions/53262263/…

这能回答你的问题吗？ Target Active Link when the route is active in Next.js

【参考方案1】：

为每个列表项创建一个对象数组并通过该数组进行映射，然后当用户选择它时，将当前选项卡的索引存储在状态中，并根据当前索引应用样式。

class Header extends React.Component 

 constructor(props)
  super(props);

  this.state = 
    currentIndex: null
  
 
 const menuData = [
   
     href:"/jobseeker/home",
     tabContent: "Home"
   ,
    
     href:"/jobseeker/account",
     tabContent: "Account"
   ,
    
     href:"/jobseeker/jobs",
     tabContent: "Jobs"
   ,
]

handleSelect = (index) => 
 this.setState( currentIndex:index );



render() 
   const  currentIndex  = this.state;
   
    
   menuData.map((menu,index) => (
     
      <ListItem key=index onClick=(() => this.handleSelect(index)>              
       <Link prefetch href=menu.href>
           <a className=currentIndex === index ? 'tab-underline':'' >menu.tabContent</a>
        </Link>                  
    </ListItem>

    ))

然后你可以在你的 css 文件中创建'tab-underline' css 类并使用它。

【讨论】：

谢谢，我尝试了您的解决方案，但它确实有效.. 我定义了一个内联样式 === const activeLink = fontWeight: 'bold' 。然后用这个类释放'tab-underline'

是的。它对我没有用..链接处于活动状态时不是粗体。我在渲染函数中添加了我的风格