我知道 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"> Please Enter Proper Credentials</h1>
</div>
我建议您查看类名库。
基本上它的作用是添加或删除您喜欢的类名，如果您的类名没有条件，只需通过 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"> 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"> Please Enter Proper Credentials</h1>
</div>
您必须定义当前状态如何呈现到视图中，因此您必须将条件绑定到错误消息的呈现中。
var visibleClass = this.props.loginInfo.userId === '' ? 'visible' : 'invisible';
return <div id="errorMessageDiv" className={visibleClass}>
<h1 id="credentials" className="login-error-message"> Please Enter Proper Credentials</h1>
</div>