Operator trójargumentowy w JSX
Jak już wiesz, wewnątrz nawiasów klamrowych można wykonywać kod JavaScript. W rzeczywistości ten kod nie może być dowolny, a tylko najprostszy.
W szczególności, nie można tam stosować warunków if.
Zamiast tego należy używać skróconych
wariantów warunków.
W zależności od wartości stałej
show wyświetlmy jeden lub drugi tekst. Użyjemy do tego
operatora trójargumentowego:
function App() {
const show = true;
return <div>
{show ? 'text1' : 'text2'}
</div>;
}
Można pracować nie tylko z tekstami, ale i z tagami:
function App() {
const show = true;
return <div>
{show ? <p>text1</p> : <p>text2</p>}
</div>;
}
Dany jest następujący kod:
function App() {
const age = 19;
return <div>
</div>;
}
Jeśli w age jest zapisane więcej niż 18 lat,
to w tekście tagu div pokaż użytkownikowi
akapit z jednym tekstem, a jeśli mniej - to
z drugim.