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

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

React では、親コンポーネントから渡された props に基づいて要素を表示または非表示にするのが一般的です。これを実現するには、条件付きで CSS クラスを適用できます。ただし、構文 {this.props.condition ? を使用すると、潜在的な問題が発生します。 'show' : 'hidden'} を文字列内で直接実行します。

この問題を解決するには、次の修正された例に示すように、中かっこを文字列の外側に移動します。

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

This調整により、クラス名を連結する前に条件が評価されるようになります。 「pull-right」の後のスペースに注意して、意図した「pull-right show」クラスではなく「pull-rightshow」クラスを誤って作成しないようにしてください。さらに、適切な評価には括弧が重要です。

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