JSXにおける三項演算子

すでにご存知のように、波括弧の中では JavaScriptコードを実行できます。実際には、 任意のコードではなく、最もシンプルなものだけが 可能です。

特に、条件式ifはそこで使用できません。 代わりに、条件式の短縮版を使用する必要があります。

定数showの値に応じて、1つのテキストまたは 別のテキストを出力してみましょう。このために 三項演算子を使用します：

jsxfunction App() {
  const show = true;
  
  return <div>
    {show ? 'text1' : 'text2'}
  </div>;
}

テキストだけでなく、タグでも作業できます：

jsxfunction App() {
  const show = true;
  
  return <div>
    {show ? <p>text1</p> : <p>text2</p>}
  </div>;
}

jsxfunction App() {
  const age = 19;
  
  return <div>
    
  </div>;
}