React中列表/网格视图切换按钮如何切换active样式类

问题原因 #

你的代码有两个核心错误导致active类切换不生效：

• 类名拼接语法错误：JSX中多个类名拼接需要使用模板字符串（反引号包裹），你当前的写法缺少反引号，也没有在两个类名之间加空格分隔
• CSS Modules类名引用错误：你使用了CSS Modules方案引入样式，所有写在less文件里的类名都会被编译为带哈希后缀的唯一类名，直接写字符串active对应的是全局类名，和你less文件中定义的.active类并不匹配，需要通过styles.active引用

修正后的代码 #

首先修正JSX部分的按钮代码：

// 提前声明视图状态即可，比如默认展示列表视图
// const [view, setView] = useState('list')

// List view
<button 
  className={`${styles.viewBtn} ${view === 'list' ? styles.active : ''}`} 
  onClick={() => setView('list')} 
  type="button" 
  title="List View"
>
  {/* 此处放svg代码 */}
</button>

// Grid view
<button 
  className={`${styles.viewBtn} ${view === 'grid' ? styles.active : ''}`} 
  onClick={() => setView('grid')} 
  type="button" 
  title="Grid View"
>
  {/* 此处放svg代码 */}
</button>

补充说明 #

你写的less样式代码无需修改，.active类在React中可以完全正常使用，只要类名的引用方式匹配你的样式引入方案即可。如果你需要拼接更复杂的多类名逻辑，也可以使用clsx这类工具库简化写法，避免手动拼接容易出现的空格遗漏问题。

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