React에서 클래스 속성을 어떻게 조건부로 적용합니까?

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

문제

에서 전달된 prop을 기반으로 버튼 그룹을 조건부로 표시하거나 숨기려고 합니다. 상위 구성 요소. 그러나 클래스 속성 내의 조건부 논리로 인해 예상된 동작이 발생합니다.

해결책

React에서 클래스 속성을 조건부로 올바르게 적용하려면 조건부 논리를 묶는 중괄호가 문자열 외부에 있는지 확인하세요. .

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

수정된 코드에서:

• 중괄호가 문자열 외부에 있으므로 조건부 논리가 문자열 내에서 평가됩니다.
• 괄호 적절한 실행을 보장하려면 조건부 논리 주변이 필요합니다.
• 실수로 "pull-right show" 대신 "pull-rightshow" 클래스를 제공하는 것을 방지하기 위해 "pull-right" 뒤에 공백이 추가됩니다.

이러한 조정을 통해 조건부 클래스 속성이 예상대로 작동하여 showBulkActions 소품의 값에 따라 버튼 그룹을 표시하거나 숨깁니다.

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