React에서 클래스 속성을 조건부로 적용하는 방법은 무엇입니까?

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

React 애플리케이션을 개발할 때 다음을 기반으로 요소를 동적으로 표시하거나 숨겨야 하는 시나리오에 직면할 수 있습니다. 상위 구성 요소에서 전달된 소품입니다. 발생하는 일반적인 문제 중 하나는 클래스 속성의 조건부 적용입니다.

이에 대한 한 가지 접근 방식은 요소를 중괄호로 묶고 렌더링 여부를 결정하는 논리식을 제공하는 조건부 렌더링 구문을 사용하는 것입니다. 그러나 클래스 속성을 처리할 때는 다른 접근 방식이 필요합니다.

제공된 예제의 목표는 showBulkActions 소품을 기반으로 조건부로 버튼 그룹을 표시하는 것입니다. 코드는 다음과 같이 버튼 그룹을 렌더링하려고 시도합니다.

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

그러나 중괄호가 문자열 내에 포함되어 있기 때문에 아무 일도 일어나지 않습니다. 이 문제를 해결하려면 중괄호를 문자열 외부에 배치해야 합니다.

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

이렇게 하면 문자열이 className 특성에 할당되기 전에 조건이 평가됩니다. 또한 의도하지 않은 클래스 연결을 방지하려면 조건식 앞에 공백이 있는지 확인하세요.

위 내용은 React에서 클래스 속성을 조건부로 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!