【React】styleの中で三項演算子を使う方法

2023年1月19日

クリックしたときに背景色変えたいときなどがある。

クリックしたかによってstyleを書き換えたいだけなので、やりたいこととしては簡単なのですが、styleの中での書き方がよく分からない。

style={{
   backgroundColor: "red"
}}

この”red”部分を参考演算子で変更できれば簡単なのだが、どうやって書くのって感じ

ちなみに、参考演算子というのは『条件 ? 真のとき : 偽のとき』って感じで、if文を1行で書けるようなやつのこと。

考えること数分、、、
こんな感じで書けるらしい。

let b = true

style={{
   backgroundColor: b ? "red" : "blue"
}}

これで真のときは赤になるし、偽のときは青になる。

ただ、backgroundColorというプロパティ自体を消したい場合はこれだと書けないかも。