Javascript výrazy v JSX
JSX je pouze “syntactic sugar” nad JavaScriptem/Typescriptem (v Reactu se kompiluje na volání
React.createElement()), proto můžeš v JSX využívat jakékoli JavaScriptové (nebo TypeScriptové) výrazy pro výpočet hodnot, podmíněné renderování (vykreslování), cykly, zpracování dat nebo funkce – přímo uvnitř značení komponent.I uvnitř renderovací části (return body) samotné můžeš některé prvky využívat. Pojďme se na to podívat.
V logické části komponenty
Situace: Máš kód, který načítá data z API - samotný kód načítání zatím nebudeme řešit - a součástí kódu je vykreslit animaci načítání, dokud se načítání zpracovává.
Pokud předčasně
returnuješ, funkce tím končí, tedy nepokračuje ve vykreslování dalšího kódu. Toho využíváme např. pro zobrazení animace načítání namísto vykreslení komponenty.Nebo pokud dojde k chybě zobrazíme chybovou hlášku a
returnem zrušíme všechny ostatní akce
const Component = () => {
// If data is loading, return spinner and end the function
if (loading === true){
return <Spinner></Spinner>
}
// Error in data loading
if (!data){
return <div>Error: xyz</div>
}
// Otherwise return component
return <h3>
{data.title}
</h3>
}🛑 Pozor!
Pokud jsou v komponentě
hooky, potom se musí vždy vyskytovat PŘED podmíněnýmreturnem nebo dalšími akcemi, které by mohly zabránit jejich spuštění!
JavaScript výraz přímo v JSX:
Použití proměnné
const name = 'Jan';
return <h2>Ahoj, {name}!</h2>;Podmíněné renderování (ternární operátor)
const loggedIn = true;
return <div>
{loggedIn ? <p>Vítej zpět!</p> : <p>Přihlas se, prosím.</p>}
</div>;Výpočty a čísla
const a = 3, b = 4;
return <div>Součet: {a + b}</div>;Zápis funkcí
function formatName(user) {
return user.first + ' ' + user.last;
}
const user = { first: 'Jan', last: 'Novák' };
return <h3>{formatName(user)}</h3>;Iterace (mapování pole na elementy)
const items = ['React', 'Vue', 'Angular'];
return (
<ul>
{items.map(item => <li key={item}>{item}</li>)}
</ul>
);Vložení objektu jako atribut (style, className, atd.)
const style = { color: 'blue', fontWeight: 'bold' };
return <p style={style}>Toto je modrý text</p>;Volání metody objektu
const date = new Date();
return <div>Teď je: {date.toLocaleTimeString()}</div>;Zápis více výrazů v komponentě
function isEven(n) {
return n % 2 === 0;
}
const n = 42;
return (
<div>
<p>Číslo: {n}</p>
<p>{isEven(n) ? 'Sudé' : 'Liché'}</p>
</div>
);Short-circuit renderování (prvek se vykreslí, jen pokud platí podmínka)
const showBtn = true;
return (
<div>
{showBtn && <button>Stiskni mě</button>}
</div>
);Shrnutí
JavaScript výrazy vkládáš do JSX pomocí { … }.
Můžeš použít proměnné, funkce, ternární operátor, logické operátory, cykly (např. map), objekty, volání metod, atd.
To ti umožní dynamicky generovat obsah komponenty podle stavu, props nebo logiky v aplikaci.