조건부 논리 jsx react

Question

내 jsx보기에서 className에 둘 이상의 조건을 적용하려고합니다. 그러나 그것은 나를 허락하지 않을 것이다.

첫 번째 조건 만 듣습니다.

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

내가 시도 여러 조합 :

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

가 어떻게 내 요소에 클래스 이름을 추가 할 조건 중 하나 이상을 달성 할 수 ?

Answer 1

는 작업의 주문이 혼합되어있다. 별도의 조건을 괄호 안에 넣으십시오. 또한, 당신은 할 수 단락이 같은 수준의 평가 : 당신이 여분의 공상을 느끼는 경우

이

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

, 당신은 또한 템플릿 문자열 사용할 수 있습니다 :이 많이 할 경우

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

를 (여러 논리 값), 공식적으로 권장되는 classnames 모듈을 Jed Watson이 살펴보십시오. Link.

그것으로, 당신은 이런 식으로 작업을 수행 할 수 있습니다

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

className={usernameClasses}; 

Answer 2

둘 다 적용될 때 클래스 이름 사이에 공백이 누락 된 것으로 생각되며 대괄호는 여러 중첩 된 조건문을 지원합니다.

이 시도 :

은

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