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:

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

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

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

Gegeben ist der folgende Code:

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

Wenn in age mehr als 18 Jahre gespeichert sind, dann zeigen Sie dem Benutzer im Text des Tags div einen Absatz mit einem Text an, und wenn weniger - dann mit einem anderen.