使用两个条件类来响应classNames(react classNames using two conditional classes)

使用两个条件类来响应classNames(react classNames using two conditional classes)

我有一个div如下：

<div className={classNames("div-one", {"half-width": this.state.showRegistration || this.state.showLogin})}> </div>

我想要的是：on !this.state.showRegistration || !this.state.showLogin !this.state.showRegistration || !this.state.showLogin这个条件我希望将“全宽”类附加到div-one而不是“half-width”

我怎样才能做到这一点？

I have a div as following:

<div className={classNames("div-one", {"half-width": this.state.showRegistration || this.state.showLogin})}> </div>

What I want is: on !this.state.showRegistration || !this.state.showLogin this condition I want append "full-width" class to div-one instead of "half-width"

How can I achieve this?

最满意答案

!this.state.showRegistration || !this.state.showLogin

不是否定的

this.state.showRegistration || this.state.showLogin

正确的否定将是!this.state.showRegistration && !this.state.showLogin 。

但我想你想要这样的东西：

const registrationOrLogin = this.state.showRegistration || this.state.showLogin; const classes = classNames("div-one", { "half-width": registrationOrLogin, "full-width": !registrationOrLogin }) <div className={classes}}> </div>

要么

const classes = `div-one ${registrationOrLogin ? "half-width" : "full-width"}`; !this.state.showRegistration || !this.state.showLogin

is not the negation of

this.state.showRegistration || this.state.showLogin

The proper negation would be !this.state.showRegistration && !this.state.showLogin.

But I guess you want something like this:

const registrationOrLogin = this.state.showRegistration || this.state.showLogin; const classes = classNames("div-one", { "half-width": registrationOrLogin, "full-width": !registrationOrLogin }) <div className={classes}}> </div>

or

const classes = `div-one ${registrationOrLogin ? "half-width" : "full-width"}`;