ReactのJSXの書き方メモ１

背景

Reactの勉強初めてみて、JSXを使用すると、
Vue.jsのSFCのtemplate部とだいぶ違うなと感じたので、備忘録的にメモ残します。

JSXでの任意の条件による内容のだし分け①

      {n > 5 && (
        <p>
          {n} は 5 よりも大きい値です
        </p>
      )}
      {n > 5 || (
        <p>
          {n} は 5 以下の値です
        </p>
      )}

ReactのJSX部では、値を返さないifなどの文は使えない。
そこで、ショートサーキット評価を使う。

• n >5 && <p>hoge</p> であれば、nが５以上であれば、&&の右側が返される
• n >5 || <p>fuga</p> であれば、nが５以上でなければ、||の右側が返される
• こうすることで、Vue.jsのv-ifみたいなことができる

JSXでの任意の条件による内容のだし分け②

      <p>
        {n % 2 === 0 ? "ﾎｹﾞ" : "ﾌｶﾞ"}
      </p>

• 使い慣れた三項演算子による内容のだし分けも可能。
• これも、三項演算子が文でなく、式であり、値を返すのでJSX上での内容のだし分けができる。

メモ

typescriptでは、
- 文：if文などの値を返さないもの
- 式：関数などの値を返すもの

最後に…

Reactの勉強で忘れそうだなと思う部分について、継続的にメモとして記事書いていきますわ…。
だれも見ていないかもしれへんけどな！！