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

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

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

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