React中如何添加多个类名？当前写法报错求解决

你之前的写法错误在于用逗号分隔类名——在JSX的大括号语法里，逗号是逗号运算符，只会返回最后一个值，而且这种写法不符合className需要字符串的要求，自然会报错。下面是几种正确的实现方式：

1. 模板字符串拼接（最常用） #

用ES6模板字符串把多个类名用空格拼接成一个字符串：

<p
  className={`${Styles.headerbtn} ${Styles.headerbtnchat}`}
  disableElevation
>
  <img src="/assets/images/Chat_Bubble.png" alt="" />
  <span className={Styles.headerbtntxt}>Chat us</span>
</p>

2. 数组转字符串 #

把类名放进数组，再用join(' ')转成空格分隔的字符串，这种方式适合需要添加条件类名的场景：

<p
  className={[Styles.headerbtn, Styles.headerbtnchat].join(' ')}
  disableElevation
>
  <img src="/assets/images/Chat_Bubble.png" alt="" />
  <span className={Styles.headerbtntxt}>Chat us</span>
</p>

如果需要根据条件动态添加类名，可以这么写（自动过滤空值）：

// 假设hasChatBtn是控制类名显示的状态
<p
  className={[
    Styles.headerbtn,
    hasChatBtn && Styles.headerbtnchat
  ].filter(Boolean).join(' ')}
  disableElevation
>
  <img src="/assets/images/Chat_Bubble.png" alt="" />
  <span className={Styles.headerbtntxt}>Chat us</span>
</p>

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