将 JSX 和普通的 className 放在一起答案

【问题标题】：Have both JSX and normal className together将 JSX 和普通的 className 放在一起
【发布时间】：2016-08-28 22:51:51
【问题描述】：

我有一个 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>
    )
  }
})

【问题讨论】：

标签： javascript html css xml reactjs

【解决方案1】：

试试这个：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以通过多种方式做到这一点。

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

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

或者你可以使用 npm 模块classnames。

【讨论】：

谢谢，只需要在大写后添加一个空格，否则它会查找名为“uppercasestatusColor”的类

【解决方案4】：

括号{} 转换为普通JS。所以你可以使用+ 来连接。

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

【讨论】：

"+ 有意外令牌"，我不得不将所有内容都包装在 { } 中。谢谢