Der ternäre Operator in JSX

Wie Sie bereits wissen, kann innerhalb geschweifter Klammern JavaScript-Code ausgeführt werden. Tatsächlich kann dieser Code nicht beliebig, sondern nur der einfachste sein.

Insbesondere können Bedingungen if dort nicht verwendet werden. Stattdessen sollten Kurzformen von Bedingungen genutzt werden.

Lassen Sie uns, abhängig vom Wert der Konstante show, den einen oder anderen Text anzeigen. Verwenden wir dafür den ternären Operator:

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

Es können nicht nur Texte, sondern auch Tags verwendet werden:

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

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