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

Question

我有一个 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>
    }
}

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