Ternaarioperaattori JSX:ssä
Kuten jo tiedät, aaltosulkujen sisällä voit suorittaa JavaScript-koodia. Itse asiassa tämän koodin ei tarvitse olla mitä tahansa, vaan vain yksinkertaisinta.
Erityisesti ehtolauseita if ei voi
käyttää niiden sisällä. Niiden sijasta tulisi käyttää lyhennettyjä
ehtomuotoja.
Esitetään yksi tai toinen teksti vakion
show arvosta riippuen. Käytetään tähän
ternaarioperaattoria:
function App() {
const show = true;
return <div>
{show ? 'text1' : 'text2'}
</div>;
}
Voi toimia paitsi tekstien, myös taggien kanssa:
function App() {
const show = true;
return <div>
{show ? <p>text1</p> : <p>text2</p>}
</div>;
}
Annettu seuraava koodi:
function App() {
const age = 19;
return <div>
</div>;
}
Jos ageen on kirjoitettu yli 18 vuotta,
näytä käyttäjälle div-tagin tekstissä
kappale yhdellä tekstillä, ja jos vähemmän - niin
toisella.
