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