在React中切换css类

Question

如何在React中使用布尔值切换css类的存在?在Angular 2中，我可以只做[class.red]="isRed"。如何在React中做熟悉的事情?

Answer 1

在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} />

Answer 2

您可以使用state。

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

在任何事件中，你都可以像

那样更改类

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

Answer 3

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

通常使用逻辑和三元操作符。