React中如何在className属性中动态拼接包含状态的多个类名

首先你这里存在一个概念混淆：你提供的card.bgColor结构是包含background、border属性的样式对象，不属于CSS类名字符串，本身就不能放到className属性中使用，你提到的常规写法<div className={card.bgColor}>本身是错误的，这类样式对象应该绑定到style属性上。

正确实现方案（两种场景） #

场景1：直接使用bgColor里的内联样式

同时使用className控制类名、style控制内联样式即可，代码如下：

<div 
  className={`prize-card ${this.state.flipped === card ? "flipped" : ""}`}
  style={card.bgColor}
  onClick={() => this.clickHandler(card)}
>

场景2：你希望把bgColor对应的类名拼接进className

如果后续你把bgColor字段调整为存储CSS类名字符串（比如值为red-card这类类名），直接在模板字符串中追加变量即可：

<div 
  className={`prize-card ${this.state.flipped === card ? "flipped" : ""} ${card.bgColor}`}
  onClick={() => this.clickHandler(card)}
>

报错原因说明 #

你之前的写法将对象表达式放在模板字符串外侧，不符合JSX的属性赋值语法规则，因此会触发编译错误。

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