Question

我有一个css样式类需要采用JSX格式，因为它取决于状态，但我还需要使用样式类作为样式的普通方式。我如何将它们组合在一起？我试过了

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

仅考虑最后一堂课

<span className={statusColor uppercase}>

显然，它会查找名为uppercase且出错的变量

<span className="uppercase {statusColor}">

他们都没有工作

下面是我的代码的dummied-down版本。这样做的正确方法是什么？

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

Answer 1

试试这个：

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

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

Answer 2

您可以通过多种方式完成此操作。

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

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

或者您可以使用npm模块Spring Boot < 1.4。

Answer 3

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

Answer 4

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

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

将JSX和普通className放在一起

4 个答案: