React中使用map方法时如何为元素添加多个className？

你的问题出在CSS Modules动态类名的访问方式上，当类名是变量时，不能用点语法（.），必须用括号语法（[]）来访问。下面是具体修正方案：

错误原因 #

• 第一种写法里的styles.btn.styled：btn是遍历的数组元素对象，styled是它的属性，你错误地把btn当成了styles的属性，实际应该先取btn.styled的值，再用该值作为styles的属性键。
• 第二种写法里的styles.customStyle：customStyle是变量，但点语法会把它当作字符串字面量，去styles里找名为customStyle的类，而不是用变量存储的symbol/equal等值。

正确写法 #

写法1：直接在模板字符串中处理 #

{BUTTONS.map((btn, i) => {
  return (
    <button
      type="button"
      className={`${styles.buttons} ${btn.styled ? styles[btn.styled] : ''}`}
      key={`${btn.key}_${i}`}
    >
      {btn.key}
    </button>
  );
})}

写法2：提前计算类名字符串 #

{BUTTONS.map((btn, i) => {
  // 基础类名
  let buttonClasses = styles.buttons;
  // 如果有styled属性，追加对应的模块化类名
  if (btn.styled) {
    buttonClasses += ` ${styles[btn.styled]}`;
  }

  return (
    <button
      type="button"
      className={buttonClasses}
      key={`${btn.key}_${i}`}
    >
      {btn.key}
    </button>
  );
})}

写法3：使用模板字符串的短路求值（更简洁） #

{BUTTONS.map((btn, i) => {
  return (
    <button
      type="button"
      className={`${styles.buttons} ${btn.styled && styles[btn.styled]}`}
      key={`${btn.key}_${i}`}
    >
      {btn.key}
    </button>
  );
})}

补充说明 #

• 当btn.styled不存在时（比如0按钮），短路求值或条件判断会避免在className里添加undefined，防止出现无效类名。
• CSS Modules会将类名编译成唯一的哈希值，所以必须通过styles对象访问，不能直接写字符串类名（比如symbol）。

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