Javascript 将JSX和普通类名放在一起

我有一个css样式类，它需要采用JSX形式，因为它取决于状态，但我还需要使用样式类来进行样式设置。如何将这些组合在一起？ 我试过了

<span className={statusColor} className="uppercase">

这只考虑了最后一节课

<span className={statusColor uppercase}>

很明显，它会查找一个名为uppercase和errors out的变量

<span className="uppercase {statusColor}">

他们两个都不工作

下面是我的代码的简化版本。正确的方法是什么

const Component = React.createClass({
    return {
      completed: false
    }
  },
  render () {
    let statusColor;
    this.state.completed === true ? statusColor = "green" : statusColor = "red";
    return (
      <div className="status-banner">
        <span className="kata-text-status">Status: <span className={statusColor} className="uppercase">{this.state.completed.toString()}</span></span>
      </div>
    )
  }
})

const Component=React.createClass({
返回{
已完成：false
}
},
渲染（）{
让我们用颜色；
this.state.completed==true？statusColor=“绿色”：statusColor=“红色”；
返回(
状态：{this.state.completed.toString（）}
)
}
})

括号

{}

转换为普通JS。因此，您可以使用

+

来连接

<span className={"uppercase " + statusColor}>

---

括号

{}

转换为普通JS。因此，您可以使用

+

来连接

<span className={"uppercase " + statusColor}>

试试这个：

<span className={`uppercase ${statusColor}`}>

这将使用ES6模板字符串（

`uppercase${statusColor}`

），并使用

${…}

插入

statusColor

，尝试以下操作：

<span className={`uppercase ${statusColor}`}>

---

这将使用ES6模板字符串（

`uppercase${statusColor}`

）并使用

${…}

插入

statusColor

，您可以通过多种方式来完成

首先，您可以使用+连接多个字符串变量并生成动态字符串

<span className={"uppercase " + statusColor}>

---

或者您可以使用npm模块。

您可以通过多种方式来实现

首先，您可以使用+连接多个字符串变量并生成动态字符串

<span className={"uppercase " + statusColor}>

或者您可以使用npm模块。

“+具有意外标记”，我必须将所有内容包装在{}中。谢谢虽然“+具有意外标记”，但我必须将所有内容包装在{}中。谢谢思想谢谢，只需在大写字母后添加一个空格，或者它会查找名为“uppercasestatusColor”的类谢谢，只需在大写字母后添加一个空格，或者它会查找名为“大写状态颜色”