javascript - 在 React 中切换 css 类

Question

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

Answer 1

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

<div className="some-class" />

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

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

可用于根据某些逻辑生成类名，例如您的 bool 检查

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

如果你的元素也应该有一些不依赖于变量的类并且应该总是被应用，这可以通过

来实现

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

此时它似乎开始变得困惑，最好将其提取到局部变量中而不是

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

React 本身并没有提供实用函数来处理这个问题，但是 bool 模式很常见，有一个名为 classnames 的包这会将上面的内容变成

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