在 React 中切换 css 类答案

【问题标题】：Toggle css class in React在 React 中切换 css 类
【发布时间】：2016-10-28 23:42:51
【问题描述】：

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

【问题讨论】：

标签： javascript html css user-interface reactjs

【解决方案1】：

您可以为此使用 state。

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

在任何情况下，您都可以更改班级

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

【讨论】：

哎哟。这看起来一点也不干净。为什么要在状态中存储这样的演示细节？按照问题中的示例，状态/道具可以包含isRed，它应该切换一个类。选择要使用的类应该只在 render() 内进行。
只是渲染的一部分。在 reactJS 中没有表示层。只有组件。如果你的组件中有一些变量意味着有一些东西可以改变，那么你需要状态。
我的意思是，状态只是用来存储那个状态——状态，比如某个东西被切换了，或者其他什么东西。表示——包括类名，然后可以从该状态和道具派生。类名本身不属于该州。也没有说清楚它来自哪里。 this.state.isExpanded ? "class1" : "class2" 清晰易读一百万倍
假设有 5 个不同的类可以使用，那么我们不能使用布尔状态。所以为了保持一致，我通常更喜欢这种方式。

【解决方案2】：

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

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

【讨论】：

请编辑更多信息。不鼓励使用纯代码和“试试这个”的答案，因为它们不包含可搜索的内容，也没有解释为什么有人应该“试试这个”。我们在这里努力成为知识的资源。

【解决方案3】：

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

【讨论】：