문자열 보간 문제 없이 React에서 클래스 속성을 조건부로 적용하는 방법은 무엇입니까?

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

React에서 props를 기반으로 클래스 속성을 동적으로 적용하는 것은 요소를 조건부로 표시하거나 숨기는 데 유용할 수 있습니다. 그러나 한 가지 일반적인 문제는 조건부 검사에 사용되는 중괄호가 문자열 보간으로 잘못 해석될 수 있다는 것입니다.

질문:

사용자가 버튼 그룹을 조건부로 표시하려고 합니다. 상위 구성 요소의 소품을 기반으로 합니다. 코드 조각은 다음과 같습니다.

<div classname="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
<p>문제는 중괄호가 문자열로 평가되어 아무것도 표시되지 않는다는 것입니다.</p>
<p><strong>답변:</strong></p>
<p>문제는 문자열 내에서 중괄호를 잘못 배치한 데 있습니다. 조건문을 올바르게 평가하려면 중괄호를 문자열 외부에 배치해야 합니다.</p>
<pre class="brush:php;toolbar:false"><div classname='{"btn-group' pull-right :>
<p>이렇게 하면 조건문이 먼저 평가되고 결과가 클래스 문자열과 연결됩니다. 실수로 클래스를 결합하는 것을 방지하려면 "pull-right" 뒤의 공백이 중요합니다(예: "pull-right show" 대신 "pull-rightshow"). 또한 적절한 평가를 보장하려면 괄호가 필요합니다.</p>
<p>이러한 조정을 통해 이제 버튼 그룹은 상위 구성 요소의 showBulkActions 소품 값에 따라 예상대로 표시되거나 사라집니다.</p>
</div>