文字列補間の問題を発生させずに React でクラス属性を条件付きで適用する方法は?

React でのクラス属性の条件付き適用

React では、props に基づいてクラス属性を動的に適用すると、要素を条件付きで表示または非表示にするのに役立ちます。ただし、一般的な問題の 1 つは、条件チェックに使用される中かっこが文字列補間として誤解される可能性があることです。

質問:

ユーザーがボタン グループを条件付きで表示しようとしています。親コンポーネントの prop に基づいています。コード スニペットは次のとおりです。

<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>