NextJS中声明CSS Module类为变量实现菜单切换的语法问题

你当前写法的核心错误 #

以下问题按代码顺序排列，全部修正后你的原有逻辑就能正常运行：

• 类名初始化语法错误：你写的let classes = {${styles.navLinks}};混用了对象字面量和字符串语法。外层的大括号{}会让JS把这部分识别为对象，但对象内直接放模板字符串、没有对应的键名属于非法语法；而React的className属性本身只接收空格分隔的类名字符串，不接收对象。
• 类名拼接逻辑错误：if分支内的classes += {${styles.active}};存在两个问题：一是右侧仍然是非法的无键对象，不是可拼接的字符串；二是就算右侧是合法字符串，如果你初始把classes设为对象，对象和字符串做加法运算时会触发隐式类型转换，最终得到[object Object]xxx这类无法匹配CSS类的乱码值。另外类名拼接时需要在新类名前加空格，否则两个类名会连在一起被识别成一个不存在的类。
• 函数调用方式错误：你在ul标签上写的className={renderClasses}传入的是函数本身，React不会自动执行这个函数拿到返回值，必须加括号执行函数，也就是写成className={renderClasses()}才能拿到拼接好的类名字符串。

贴合你原有思路的修正代码 #

完全保留你「声明函数动态拼接类名」的逻辑，只修正上述语法错误后的代码如下：

const [navLinkOpen, navLinkToggle] = useState(false);
const handleNavLinksToggle = () => {
  navLinkToggle(!navLinkOpen);
};

const renderClasses = () => {
  // 初始值直接赋值为字符串，去掉包裹的对象大括号
  let classes = `${styles.navLinks}`;
  if (navLinkOpen) {
    // 拼接前加空格分隔两个类名，右侧同样去掉对象大括号，直接拼接字符串
    classes += ` ${styles.active}`;
  }
  return classes;
};

对应ul标签的写法修正为：

<ul className={renderClasses()}>

其他可选实现方案 #

等你吃透上面的基础拼接逻辑后，也可以用更简洁的写法实现同样效果，不需要单独声明拼接函数：

<ul className={`${styles.navLinks} ${navLinkOpen ? styles.active : ''}`}>

如果后续遇到更复杂的类名判断逻辑（比如多条件切换多个类），也可以使用clsx这类专门处理类名拼接的轻量工具库简化代码。

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