在 React 中，元素使用这样的语法获取它们的类

<div className="some-class" />

但是请注意，JSX 允许属性值是 JS 表达式

<div className={"some-" + "class"} />

可以使用它根据某些逻辑生成类名，例如您的布尔检查

<div className={isRed ? "red" : null} />

如果您的元素还应该有一些不依赖于变量并且应该始终应用的类，这可以通过

<div className={"my-class " + (isRed ? "red" : null)} />

此时它似乎开始变得混乱，最好将其提取到局部变量中

var className = "my-class " + (isRed ? "red" : null);
<div className={className} />

React 本身并没有提供一个实用函数来处理这个问题，但是布尔模式非常普遍，有一个名为classnames的包可以将上述内容转换为

var className = cx("my-class", { "red": isRed });
<div className={className} />

您可以为此使用状态。

<div className={this.state.styleClass}></div>

在任何事件中，您都可以更改课程，例如

handleClick: function(){
    this.setState({styleClass: 'red'})
}

在 React 中切换 css 类

<div className={isRed && "red"}></div>

let isRed = true;
//result
<div class="red"></div>

let isRed = false or null or undefined or "" or 0;
//result
<div class=""></div>

如果有另一个类你可以使用

<div className={"element "+ (isRed ? "red":"")}></div>

或将结果放入变量

let modificator = isRed ? "red":"";
<div className={"element "+ modificator}></div>

与打开/关闭类相同

let modificator = isOpen ? "open" : "close";
<div className={"element "+ modificator}></div>

如果你不想渲染某些元素

{isShow && <div className="element"></div> }

这是常见的做法，为此使用逻辑和三元运算符。