javascript - 如何避免在 ReactJS 中调用 jQuery

Question

我知道 JQuery 是 ReactJS 中的一种代码味道，因为它遍历整个 DOM 来完成它的工作。但是，我发现有些地方很难不使用它。这是我想尽可能找到更好方法的一个实例。

我只是想根据字段是否被填充来显示或隐藏 div 上的消息...

JavaScript:

if (this.props.loginInfo.userId === ''){
     $("#errorMessageDiv").attr('class', 'visible');
} else{
     $("#errorMessageDiv").attr('class', 'invisible');
}

jsx:

<div id="errorMessageDiv" className="invisible">
     <h1 id="credentials" className="login-error-message">&nbsp;Please Enter Proper Credentials</h1>
</div>

Answer 1

我推荐你看看classnames图书馆。

基本上它的作用是添加或删除你喜欢的类名，如果你有没有条件的类名，只需传递 true。请参阅以下代码段。

import classNames  from 'classnames'

<div 
  id="errorMessageDiv"
  className={ classNames({
    'visible' : this.props.loginInfo.userId === '',
    'invisible' : this.props.loginInfo.userId !== '',
    'some-other-class-name' : your_condition,
    'will-be-available-definetely' : true
  }) }
>
     <h1 id="credentials" className="login-error-message">&nbsp;Please Enter Proper Credentials</h1>
</div>

如果您只有一个条件，您可以执行以下操作:

import classNames  from 'classnames'

<div 
  id="errorMessageDiv" 
  className={ this.props.loginInfo.userId === '' ? 'visible' : 'invisible' }
>
     <h1 id="credentials" className="login-error-message">&nbsp;Please Enter Proper Credentials</h1>
</div>