如何避免在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>