'+（（可见&&“处于活动状态”）||“”）'是一个好习惯吗？

Question

我正在编写精美的登录模式，遇到了一些令人困惑的问题。我需要在React中切换模式。并以为这是最优雅的方式。但是安全吗？还是好的做法。

className={ 'modal ' + ((this.state.showLoginModal && 'is-active') || '') } 

我希望这在某些浏览器上不会失败。

Answer 1

完全可以使用这种语法，但是我更喜欢使用ES6中的滴答和三元运算符：

className={`modal ${this.state.showLoginModal ? 'is-active' : ''}`} 

Explained here.

Answer 2

当前有效。然后，在某些时候，有人想要反转逻辑并交换两个字符串：

 ((this.state.showLoginModal && '') || 'is-active')

瞧，它坏了。我更喜欢这里的三元，因为它更易于理解且更防弹：

  this.state.showLoginModal ? "is-active" : ""

Answer 3

为什么不简单地使用三元，它会更易读易懂

className={ 'modal ' + (this.state.showLoginModal ? 'is-active' : '') } 

Answer 4

作为替代建议，如果发现自己到处都在做这种事情，那么考虑使用classNames以获得更清洁的API

// 'is-active' if true, '' if false
classNames({ 
  'is-active': this.state.showLoginModal 
});