ReactJSでのjQueryコールの回避方法

Question

JQueryはReactJSのコード臭です。なぜなら、それはDOMを使って作業を行うためです。しかし、私はそれを使用するのが難しいいくつかの場所を見つけました。これは可能な限りより良い方法を見つけたいと思う1つの例です。

私はちょうど...フィールドが設定されているかどうかに基づいて、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> 

Answer 2

あなたがのレンダリングに条件をバインドする必要があるので、あなたは、現在の状態がビューにレンダリングする方法を定義する必要がありますエラーメッセージ。

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