使用两个条件类来响应classNames

Question

我有一个div如下：

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

我想要的是：在!this.state.showRegistration || !this.state.showLogin这个条件我要追加＆＃34;全宽＆＃34; class to div-one而不是＆＃34; half-width＆＃34;

我怎样才能做到这一点？

Answer 1

!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"}`;

Answer 2

const resultClass = {this.state.showRegistration || this.state.showLogin ? 'half-width' : 'full-width'};
<div className={classNames("div-one",
    [resultClass]: true }>
</div>