React에서 클래스 속성을 조건부로 어떻게 적용할 수 있나요?

React에서 조건부로 클래스 속성 적용

React에서는 상위 구성 요소에서 전달된 prop을 기반으로 요소를 표시하거나 숨기는 것이 일반적입니다. 이를 달성하기 위해 CSS 클래스를 조건부로 적용할 수 있습니다. 그러나 {this.props.condition ? 'show' : 'hidden'}은 문자열 내에서 직접 실행됩니다.

이 문제를 해결하려면 다음 수정된 예에서 볼 수 있듯이 중괄호를 문자열 외부로 이동하세요.

<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}

이것은 조정을 통해 클래스 이름을 연결하기 전에 조건이 평가됩니다. 의도한 "pull-right show" 클래스 대신 "pull-rightshow" 클래스가 실수로 생성되는 것을 방지하려면 "pull-right" 뒤에 공백을 기록하십시오. 또한 괄호는 올바른 평가를 위해 매우 중요합니다.

위 내용은 React에서 클래스 속성을 조건부로 어떻게 적용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!