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

您可以使用州。

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

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

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

Answer 3

在React中切换css类

- (UIView *) createView
{
        UIView *rootView = [[[NSBundle mainBundle] loadNibNamed:@"MyRootView" owner:self options:nil] objectAtIndex:0];
        return rootView;
}

如果有其他课程你可以使用

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

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

在React中切换css类

3 个答案: