More than 1 year has passed since last update.

reactで条件にあった時に特定のclassを付与する書き方

Last updated at 2022-07-16Posted at 2021-02-21

今回、reactでclassNameを動的に付与させたいと思ったので、調べたことを備忘録として残しておきます。

##書き方

① true or false で違うクラス名を付与する


<p className={completed ? "completed" : "incomplete"}>
   hoge
</p>

この場合、trueならcompletedが、falseならincompleteが付与されます。

② falseの場合はクラス名なし、trueの時に１つだけクラス名を付与
※false時にクラス名を付与したい場合はコロンの右側にクラス名を記載する


<p className={completed ? "completed" : ""}>
   completed  
</p>

③ falseの場合はクラス名なし、trueの時に2つ以上クラス名を付与
※false時にクラス名を付与したい場合はコロンの右側にクラス名を記載する


<p className={completed ? "completed hoge" : ""}>
   completed  
</p>

この場合は通常のクラス名の記載方法と同じで半角スペースを開けて記載すればOK

###どちらにも共通のクラス名を付与した上で、+αで条件によってクラス名を付与したい場合


<p className={`item ${completed ? "completed" : ""}`}>
   completed  
</p>

この場合、completedがtrueでもfalseでもクラス名itemは付与されます。
バッククオートで全体を囲み、条件分岐の箇所を${}で囲ってあげればOKです。条件分岐の書き方に関しては今までの書き方と同じです。

+を使って以下のように書くこともできます。


<p className={'item ' + (completed ? "completed" : "")}>
   completed  
</p>

気をつけるポイントとしてはitemの後に半角を入れる必要があります。
もし、半角を入れずに、completedがtrueになった場合、クラス名がitemcompletedとなってしまい、思うようにCSSが適用されなくなってしまいます。

以上、動的にクラス名を付与したいときの書き方でした！