React函数组件点击按钮添加选中类并移除其余按钮选中类的实现方案

核心思路是仅用单个 useState 存储当前选中的选项标识，无需为每个选项单独声明状态，同时将菜单选项抽离为公共配置，新增选项仅需修改配置即可，无需调整业务逻辑。

优化后完整代码 #

import { useState } from 'react';

// 菜单配置抽离，新增选项仅需在此处添加对应配置项
const MENU_OPTIONS = [
  { value: 'day', label: 'Day' },
  { value: 'month', label: 'Month' },
  { value: 'year', label: 'Year' }
];

function SortMenu(props){
    // 单个状态存储当前选中的选项值，淘汰多状态冗余声明
    const [selectedKey, setSelectedKey] = useState('');

    const choice = (value) =>{
        props.setSort(value);
        // 统一选中逻辑：重复点击已选中项则取消高亮，否则更新选中项
        setSelectedKey(prev => prev === value ? '' : value);
    }

    return(
    <nav className="sortmenu">
        {/* 遍历配置渲染所有选项，无需手动编写重复节点 */}
        {MENU_OPTIONS.map(item => (
          <div 
            key={item.value}
            className={`${selectedKey === item.value ? 'choice-selected' : ''} choice`} 
            onClick={() => choice(item.value)}
          >
            {item.label}
          </div>
        ))}
    </nav>
    )
}

优化说明 #

• 状态简化：将原本N个选项对应N个状态的冗余写法，合并为单个状态存储当前选中值，代码量大幅减少
• 逻辑统一：删除繁琐的switch分支，所有选项的选中、重置逻辑完全复用，新增选项无需额外编写重置逻辑
• 扩展性强：菜单配置与业务逻辑完全解耦，新增选项仅需在MENU_OPTIONS数组中添加value和label配置即可，无需修改其他代码

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