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

Question

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

这是我的导航摘录

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

Answer 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类并使用它。