React에서 클래스 속성을 조건부로 적용하는 방법: 버튼 그룹 가시성 토글이 작동하지 않는 이유는 무엇입니까?

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

개념적으로 요소를 조건부로 렌더링하는 것은 React에서 일반적인 사용 사례입니다. 그러나 클래스 속성을 고려할 때 문제가 발생합니다. 이 문서에서는 실제 예를 사용하여 클래스 속성을 조건부로 적용하는 방법을 살펴봅니다.

질문:

사용자가 상위 구성 요소에서 전달된 부울 값입니다. 그러나 클래스 속성이 올바르게 평가되지 않습니다.

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

답변:

문제는 표현식을 둘러싸는 중괄호 배치에 있습니다. 문자열 내부에 있는 대신 다음과 같이 괄호와 함께 외부에 있어야 합니다.

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

중괄호를 문자열 외부에 배치하면 표현식이 정적 문자열이 아닌 JavaScript 코드로 평가됩니다. . 이를 통해 this.props.showBulkActions의 부울 값을 기반으로 올바른 클래스를 적용할 수 있습니다.

또한 클래스 속성이 올바르게 적용되도록 "pull-right" 뒤에 공백이 추가됩니다. 공간이 없으면 "pull-right show" 대신 "pull-rightshow"와 같은 유효하지 않은 클래스를 생성할 위험이 있습니다.

위 내용은 React에서 클래스 속성을 조건부로 적용하는 방법: 버튼 그룹 가시성 토글이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!