React JS中如何用state作为菜单标签的激活状态指示器

核心思路是仅给当前激活的菜单项应用activeTab对应的类名，未激活的项不添加这个类，就能通过CSS精准控制激活状态样式。

基础实现方式 #

通过条件判断，只有当activeTab匹配当前菜单项的标识时，才将activeTab作为类名添加到对应div上：

const [activeTab, setActiveTab] = useState("home");

// 菜单渲染
<div 
  className={activeTab === "home" ? activeTab : ""}
  onClick={() => setActiveTab("home")}
>
  <img src={Assets.Home} alt="Home" />
  <p>Home</p>
</div>
<div 
  className={activeTab === "wallet" ? activeTab : ""}
  onClick={() => setActiveTab("wallet")}
>
  <img src={Assets.Wallet} alt="Wallet" />
  <p>Wallet</p>
</div>

对应的CSS直接针对类名写激活样式即可：

/* Home项激活样式 */
.home {
  color: #1677ff;
  /* 其他激活状态样式：比如图标高亮、边框变化等 */
}

/* Wallet项激活样式 */
.wallet {
  color: #1677ff;
  /* 其他激活状态样式 */
}

优化版（多菜单场景） #

如果菜单项较多，把菜单数据抽成数组循环渲染，避免重复代码：

const [activeTab, setActiveTab] = useState("home");

// 定义菜单数据
const menuItems = [
  { key: "home", icon: Assets.Home, label: "Home" },
  { key: "wallet", icon: Assets.Wallet, label: "Wallet" }
];

// 循环渲染菜单
{menuItems.map(item => (
  <div 
    key={item.key}
    className={activeTab === item.key ? activeTab : ""}
    onClick={() => setActiveTab(item.key)}
  >
    <img src={item.icon} alt={item.label} />
    <p>{item.label}</p>
  </div>
))}

新增菜单项只需在menuItems数组里添加数据即可，无需修改渲染逻辑，更易维护。

内容的提问来源于stack exchange，提问作者Amos Machora