TS if文ネストの書き方

Question

開発環境
TypeScript/Reactを使っています。

やりたいこと
reactで以下の条件によってCSSの切り分けをしたいです。

条件
・配列要素が１以上の場合
＿・イメージデータが３の場合
＿＿CSS1
＿・それ以外の場合
＿＿CSS2

・それ以外の場合
＿・イメージデータが３の場合
＿＿CSS1
＿・それ以外の場合
＿＿CSS2

現在のコード

<div className={`${配列.length < 1 ? (イメージデータ === 3 ? "CSS1" : "CSS2") : ("CSS2")`}>

三項演算子で書いていましたがやりたいことができていなく、、、
条件の、それ以外の場合の条件分岐が現在できていない状態です。今のままの書き方だと冗長な記述となってしまう気がしています。
もっと賢い書き方あれば教えてください。

Comments

[wsb]

やりたいことができていない、について具体的な状況を説明してみてはいかがでしょうか
ついでに、
`${
↑これなんですか？

[mimimimimi_]

ありがとうございます。
コードとできていないことについて詳細に記載して修正しました。
`${　については現場の方が使用しておりそのまま使っていました。。

[hoshi-takanori]

JavaScript ではバッククォートでくくった文字列 `〜` の中に ${〜} で変数や式を展開できますが、バッククォートの中身が全部それ `${〜}` だと単に 〜 と書いたのと同じことになりますね。
あと、三項演算子が長くて訳わからなくなってるなら、いったん変数に代入して使えば良いのでは。それなら if 文も使えるし。

[wsb]

ひとつ{}が閉じていないように見えるのは、私が知らないだけでそういうものだったりするんですか？

Answer 1

変数を立てて、「条件」以下の内容をそのままif-elseに起こして変数に代入する、というのが、わかりやすさではいちばんいいかと思います。

三項演算子は、コードの文字数を減らすのと同時に可読性も落としてしまいます。

Comments

[mimimimimi_]

（2年越しにすみません。）
回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。