Props를 기반으로 React 요소를 조건부로 렌더링하는 방법: 버튼 그룹을 사용한 동적 UI 가이드?

props를 기반으로 조건부로 React 요소 렌더링

React에서는 상위 구성 요소에서 전달된 데이터를 기반으로 요소를 조건부로 표시하거나 숨기는 것이 필요한 경우가 많습니다. . 이를 통해 개발자는 동적이고 반응이 빠른 사용자 인터페이스를 만들 수 있습니다.

이것이 일반적인 사례 중 하나는 버튼 그룹을 다룰 때입니다. 특정 조건이 충족되는 경우에만 버튼 그룹을 표시할 수 있습니다. 예를 들어, 테이블에서 여러 항목을 선택한 경우에만 표시되어야 하는 "대량 작업" 버튼 그룹이 있을 수 있습니다.

이를 수행하려면 React의 렌더링 메서드에서 조건부 렌더링 구문을 사용할 수 있습니다. 일반 형식은 다음과 같습니다.

<code class="javascript">{this.props.showBulkActions ? <ElementToShow /> : null}</code>

이 예에서 this.props.showBulkActions는 상위 구성 요소에서 전달된 부울 속성입니다. true인 경우 구성 요소가 렌더링됩니다. 그렇지 않으면 아무것도 렌더링되지 않습니다.

그러나 제공된 코드 조각에서 중괄호가 실수로 클래스 속성 문자열 내에 포함되었습니다.

<code class="javascript">className=&quot;btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"></code>

이로 인해 React가 표현식을 제대로 평가하지 못하게 됩니다. . 이 문제를 해결하려면 다음과 같이 중괄호를 문자열 외부에 배치해야 합니다.

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

또한 잘못된 클래스 이름이 생성되지 않도록 "당기기 오른쪽" 뒤에 공백이 있는지 확인하세요. 이러한 조정을 통해 버튼 그룹은 이제 showBulkActions 소품에 따라 조건부로 나타나고 사라져야 합니다.

위 내용은 Props를 기반으로 React 요소를 조건부로 렌더링하는 방법: 버튼 그룹을 사용한 동적 UI 가이드?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!