React でクラス属性を条件付きで適用する方法: ボタン グループの表示/非表示切り替えが機能しないのはなぜですか?

React でクラス属性を条件付きで適用する

概念的には、要素を条件付きでレンダリングすることは、React の一般的な使用例です。ただし、クラス属性を考慮すると疑問が生じます。この記事では、実際の例を使用してクラス属性を条件付きで適用する方法を説明します:

質問:

ユーザーは、次の条件に基づいてボタン グループの表示/非表示を切り替えようとしています。親コンポーネントから渡されるブール値。ただし、クラス属性は正しく評価されません。

<code class="jsx"><div classname='{"btn-group' pull-right :>
<p><strong>回答</strong>:</p>
<p>問題は、式を囲む中括弧の配置にあります。次のように、文字列の内側ではなく、括弧とともに外側に置く必要があります。</p>
<pre class="brush:php;toolbar:false"><code class="jsx"><div classname='{"btn-group' pull-right :>
<p>中括弧を文字列の外側に配置すると、式は静的な文字列ではなく JavaScript コードとして評価されます。 。これにより、this.props.showBulkActions のブール値に基づいて正しいクラスを適用できるようになります。</p>
<p>さらに、クラス属性が適切に適用されるように、「pull-right」の後にスペースが追加されます。スペースがないと、「pull-right show」ではなく「pull-rightshow」など、無効なクラスが作成される危険性があります。</p>
</div></code>