React에서 조건부 클래스 렌더링을 올바르게 구현하는 방법은 무엇입니까?

React에서 클래스 속성의 조건부 렌더링

React에서는 상위 컴포넌트로부터 받은 props를 기반으로 요소를 조건부로 표시하거나 숨기는 것이 일반적입니다. 사용 사례. 주어진 코드 조각에서 작성자는 showBulkActions 소품의 값을 기반으로 버튼 그룹을 숨기거나 표시하는 것을 목표로 합니다.

문제는 조건부 렌더링에 사용되는 중괄호 { }가 문자열 내에 포함되어 있다는 것입니다. className 속성. 이는 전체 문자열을 정적 값으로 해석하므로 실제 조건부 렌더링이 발생하지 않습니다.

해결책:

prop를 기반으로 클래스 속성을 조건부로 적용하려면 중괄호를 사용하세요. 문자열 외부에 위치해야 하며 논리적 조건을 포함하고 클래스 이름을 결정해야 합니다. 다음 코드는 올바른 접근 방식을 보여줍니다.

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

설명:

• className은 이제 중괄호로 묶입니다.
• 논리적 조건(this.props.showBulkActions ? 'show' : 'hidden')은 다음과 같은 경우 'show'로 평가됩니다. this.props.showBulkActions는 true이고, false이면 '숨김'입니다.
• "pull-right" 뒤의 공백은 "pull-rightshow"가 실수로 클래스로 적용되지 않도록 보장합니다.
• 괄호는 삼항 표현식을 올바르게 평가하는 데 매우 중요합니다.

다음을 따르세요. 수정을 통해 이제 버튼 그룹은 상위 구성 요소의 showBulkActions 소품에 따라 조건에 따라 나타나거나 사라져야 합니다.

위 내용은 React에서 조건부 클래스 렌더링을 올바르게 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!