React函数组件导航Link独立激活问题求助

你当前的问题核心在于用单个布尔值color控制所有导航项的激活状态，导致点击时所有项同步变化。要实现单个项独立激活，需要用状态记录当前激活的导航项索引，而非全局布尔值。

修改步骤： #

1. 替换状态定义：把原来的color状态改成记录激活索引的activeTab，初始值可设为null（默认无激活项）或某个默认索引（比如1）：

const [activeTab, setActiveTab] = useState(null); // 也可以用useState(1)设置默认激活项

2. 更新点击逻辑：移除原toggle函数，点击时直接设置激活索引。若点击的是当前已激活项，则取消激活（设为null）：

// 每个Link的onClick逻辑改为对应索引的判断
onClick={() => {
  setActiveTab(prev => prev === 1 ? null : 1); // 这里的1对应当前项的索引，其他项替换为2、3、4、5
}}

3. 修改className判断：每个Link根据自身索引是否等于activeTab来决定是否添加激活类：

<div className="blog-list">
  <ul className="top-nav">
    <li>
      <Link 
        to='' 
        className={`link ${activeTab === 1 ? 'link-change' : ''}`} 
        onClick={() => setActiveTab(prev => prev === 1 ? null : 1)}
      >Tourism in Japan</Link>
    </li>
    <li>
      <Link 
        to='' 
        className={`link ${activeTab === 2 ? 'link-change' : ''}`} 
        onClick={() => setActiveTab(prev => prev === 2 ? null : 2)}
      >Life in Japan</Link>
    </li>
    <li>
      <Link 
        to='' 
        className={`link ${activeTab === 3 ? 'link-change' : ''}`} 
        onClick={() => setActiveTab(prev => prev === 3 ? null : 3)}
      >Accomodation</Link>
    </li>
    <li>
      <Link 
        to='' 
        className={`link ${activeTab === 4 ? 'link-change' : ''}`} 
        onClick={() => setActiveTab(prev => prev === 4 ? null : 4)}
      >Transportation</Link>
    </li>
    <li>
      <Link 
        to='' 
        className={`link ${activeTab === 5 ? 'link-change' : ''}`} 
        onClick={() => setActiveTab(prev => prev === 5 ? null : 5)}
      >Tours & Activities</Link>
    </li>
  </ul>
</div>

可选优化： #

如果导航项较多，可将数据抽成数组用map渲染，减少重复代码：

const navItems = [
  { id: 1, text: 'Tourism in Japan', path: '' },
  { id: 2, text: 'Life in Japan', path: '' },
  { id: 3, text: 'Accomodation', path: '' },
  { id: 4, text: 'Transportation', path: '' },
  { id: 5, text: 'Tours & Activities', path: '' },
];

// 渲染部分
<div className="blog-list">
  <ul className="top-nav">
    {navItems.map(item => (
      <li key={item.id}>
        <Link 
          to={item.path} 
          className={`link ${activeTab === item.id ? 'link-change' : ''}`} 
          onClick={() => setActiveTab(prev => prev === item.id ? null : item.id)}
        >{item.text}</Link>
      </li>
    ))}
  </ul>
</div>

修改后每个导航项的激活状态完全独立，点击哪个就切换哪个的样式，再次点击同一项会取消激活。

内容的提问来源于stack exchange，提问作者Chibuzo Odigbo