React でクラス属性を条件付きで適用するにはどうすればよいですか?

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

React アプリケーションを開発するとき、以下に基づいて要素を動的に表示または非表示にする必要があるシナリオに遭遇することがあります。親コンポーネントから渡される props。よく発生する問題の 1 つは、クラス属性の条件付き適用です。

これに対する 1 つのアプローチは、条件付きレンダリング構文を使用することです。要素を中括弧で囲み、それをレンダリングするかどうかを決定する論理式を指定します。ただし、クラス属性を扱う場合は、別のアプローチが必要です。

この例では、目標は、showBulkActions プロパティに基づいて条件付きでボタン グループを表示することです。このコードは、次のようにボタン グループをレンダリングしようとします。

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

ただし、中括弧が文字列内で囲まれているため、何も起こりません。これを修正するには、中括弧を文字列の外側に配置する必要があります。

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

これにより、文字列が className 属性に割り当てられる前に条件が確実に評価されます。さらに、意図しないクラスの連結を避けるために、条件式の前にスペースがあることを確認してください。

以上がReact でクラス属性を条件付きで適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。