jsx 三項演算子の分岐でさらに条件式を使う方法

why

サーバーサイドでは動かないコードを render 部分で処理させる必要があったので使うことになった

三項演算子 での 処理

三項演算子での 条件が true の場合の処理で js を使いたい場合、

    {
      (true)
      ?
        (
        {
          console.log(hoge)
        }
          <div>
          true
          </div>
        )
      :
        (
          <div>no window</div>
        )
    }

このように

{ console.log() }
<div> someTextHere <div>

と書くと

internal server error 505 で

実行されないが

    {
      (true)
      ?
        (
          <div>
        {
          console.log(hoge)
        }
          true
          </div>
        )
      :
        (
          <div>no window</div>
        )
    }

このように

<div> { console.log() }  messageTextHere <div>

と html タグの内部に入れると実行される。

しかし、html タグの内部に書いても

    {
      (true)
      ?
        (
          <div>
        {
          const hoge = 'hogemsg'
          console.log(hoge)
        }
          true
          </div>
        )
      :
        (
          <div>no window</div>
        )
    }

変数定義してそれを出力する処理はできない。

なのでここで処理しなくてはならない場合は、変数定義というクッションをおかずに直接処理を console か html に書き出せば行ける

<div>     
{ 1 * 3 } 
</div>    

このように。内部計算ならできるようだ。

しかし jsx では if は使えないので

<div>               
{ (false)?'y':'n' } 
</div>              

三項演算子ならできた。