条件付きロジックjsx react

Question

私のjsxビューでclassNameに複数の条件を適用しようとしています。しかし、それは私を許さないでしょう。

最初の条件だけを聞きます。

className={usernameFocus ? "toggled" : "" || usernameValidated ? "validated" : ""} 

私はいくつかの組み合わせを試してみました：

className={usernameFocus ? "toggled" : "" + usernameValidated ? "validated" : ""} 

私は私の要素にクラス名を追加するには、条件1以上を達成できますか？

Answer 1

ご注文が混同されています。別々の条件をかっこに入れてください。また、あなたは短絡このようなクラスの評価を行うことができます

className={(usernameFocus && "toggled") + " " + (usernameValidated && "validated")} 

をあなたは余分な空想を感じる場合は、テンプレート文字列を使用することができます。

className={`${usernameFocus && "toggled"} ${usernameValidated && "validated"}`} 

あなたはこのロット（複数のブールを行う場合）、Jed Watsonの公式に推奨されるclassnamesモジュールを見てください。 Link。

これを使うと、このようにそれを行うことができます。

var usernameClasses = classNames({ 
    'validated': usernameValidated, 
    'toggled': usernameFocus 
}); 

className={usernameClasses}; 

Answer 2

は、私はまた、複数のネストされた条件文を支援ブラケット、あなたは両方が適用されたときのクラス名の間にスペースが不足していると思います。

はこれを試してみてください：オペレーションの

className={(usernameFocus ? "toggled" : "") + " " + (usernameValidated ? "validated" : "")}