javascript - 同时拥有JSX和普通的className

我有一个css样式类，它需要采用JSX形式，这取决于状态，但是我还需要使用样式类的常规样式进行样式化。如何将它们组合在一起？
我试过了

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

仅考虑最后一类

<span className={statusColor uppercase}>

显然是在寻找一个叫做大写的变量并且出错了

<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>
    )
  }
})

最佳答案

尝试这个：

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

这将使用ES6模板字符串（`uppercase ${statusColor}`）并将statusColor插入${...}。