こんにちは！angularに手を出す機会を完全に逃してしまいました。Mizutani(@sirycity)です。2018年くらいに学習しときゃ良かった...

結構前に書いたVueの:classの書き方3通りの記事が最近伸びているので、今日はReactバージョンも書いてみます。どうぞ

静的なclassName(通常のclassName)

通常のクラスを付与する方法はこんな感じ。普通のHTMLのclassがclassNameになるだけ。簡単！

<div className="red">りんご</div>

クラスを複数付ける時も同じ。あとシングルクォートでもok。

<div className="blue white red">フランス</div>

バッククォートはだめ。バッククォートの時は{}が必要です。別にシングル、ダブルでも{}つけてもok。

<div className={`foo`}>
  バッククォートかっこ付き
</div>
<div className={'foo'}>
  シングルクォートかっこ付き
</div>
<div className={"foo"}>
  ダブルクォートかっこ付き
</div>

後で詳しく書くけど、かっこの中にはJSに式を入れれます。こんな感じに

<div className={'blue' + 'white' + 'red'}>フランス</div>

バッククォートは改行できます。クラスが沢山になった時にどうぞ！

<div
  className={`
  blue
  white
  red
`}
>
  フランス
</div>

classNameの中は普通の文字列だから、JSみたいに他の変数に入れといても大丈夫よ。こんな感じ。reactはこの辺の自由度すごいよね。

const Foo = () => {
  const foo = 'red'

  return <div className={foo}>りんご</div>
}

でも文字列足したりする時は半角スペース挟むの忘れないように。ここ間違えやすいポイント。こんな感じにね。

const Foo = () => {
  const foo = 'blue '
  const bar = 'white '
  const baz = 'red '

  return <div className={foo + bar + baz}>フランス</div>
}

静的なクラスはこんなもんです。

動的なclassName

reactは静的だろうが動的だろうが全部classNameです。vueみたいにclassと:classに分かれたりはしないよ。JSでなんとかせいって感じ。

条件に合えばclassを付与

変数isRedがtrueの時だけクラスredを付与するにはこう！

<div className={isRed ? 'red' : ''}>りんご</div>

複数でも同じ。変数isDarkRedがtrueの時にdarkとred付けるのはこう！darkとredの間に半角スペース忘れずにね。

<div className={isDarkRed ? 'red dark' : ''}>ダークりんご</div>

同じdarkredのパターンで、条件に関わらずbigってクラスは絶対に付く場合とかだとこう。bigの後の半角スペース忘れずに！

<div className={'big ' + (isDarkRed ? 'red dark' : '')}>ダーク大きいりんご</div>

↑のりんご、ダークりんご、ダーク大きいりんごをバッククォートで書くとこう。こっちの方が短いけどちょっとややこしいかも！

<div className={`${isRed ? 'red' : ''}`}>
  りんご
</div>
<div className={`${isDarkRed ? 'dark red' : ''}`}>
  ダークりんご
</div>
<div className={`big ${isDarkRed ? 'dark red' : ''}`}>
  ダーク大きいりんご
</div>

おまけ

上のやつって 変数 ? 適応するクラス : '' って書いてあるけどいちいち空文字''指定するのめんどいし見にくいよね？そんな時はこれでもok。

<div className={isRed && 'red'}>りんご</div>

めっちゃシンプル。だけどこの書き方だと、isRedがfalseの時にそのまんまfalseって名前のクラスがHTMLに吐き出されちゃう。まあfalseって名前のクラスなんて使うこともないだろうし別にいいんだけど、人によっては気になるかも。ソースコードのJSXを綺麗にするか、吐き出されるHTMLを綺麗にするかって話ですね。

このfalseそのまま出るパターンで他2つも書くとこう。実際僕はこうやって書いてます。

<div className={isDarkRed && 'dark red'}>
  ダークりんご
</div>
<div className={`big ${isDarkRed && 'dark red'}`}>
  ダーク大きいりんご
</div>

条件に合えばclass1、合わなければclass2を付与

これはvueよりかなり分かりやすい。vueは **「条件に合うとクラス付与はオブジェクト、条件でクラス出し分けは三項演算子」**だったけど、reactは両方とも三項演算子。

りんごの例で引き続き考えてみます。今度はtrueなら引き続き暗いりんご(dark red)、falseなら青くて明るいりんご(light green)にしてみよう。結果がこちら。

<div className={isRed ? 'red' : 'green'}>
  りんごor青りんご
</div>
<div className={isDarkRed ? 'dark red' : 'light green'}>
  ダークりんごorライト青りんご
</div>
<div className={`big ${isDarkRed ? 'dark red' : 'light green'}`}>
  ダーク大きいりんごorライト大きい青りんご
</div>

超簡単やな。reactのclassName分岐は基本三項演算子使えばなんとでもなるって覚えとくといいかも。

付与するクラス名の一部に変数を用いる

これもシンプル。りんごの色を水色(light-blue)か黄緑(light-green)にしてみよう。

const Apple1 = () => {
  const color = 'blue'

  return <div className={`light-${color}`}>水色りんご</div>
}

const Apple2 = () => {
  const color = 'green'

  return <div className={`light-${color}`}>黄緑りんご</div>
}

ただしこの方法は弱点があって、クラス名の一部分が変数になってるようなやつはpurgecss(余分なCSSを消すライブラリ)使ってると消し飛ばされます。あんまり良い方法じゃないしな。要注意。

以上。上でもちょい書いたけど、「基本三項演算子使っときゃ何とでもなる」「クラス名はただの文字列」この2点押さえれば完璧！以上。よいreactライフを！