Podmienené vykresľovanie sa týka zmeny správania aplikácie v závislosti od jej stavu. Môžete napríklad zmeniť uvítaciu správu vašej aplikácie React na tmavú počas noci. Týmto spôsobom budete mať na displeji rôzne správy v závislosti od dennej doby.

Podmienené vykresľovanie vám umožňuje vykresliť rôzne komponenty alebo prvky Reactu, ak je splnená podmienka. V tomto návode sa dozviete o rôznych spôsoboch, ako môžete použiť podmienené vykresľovanie v aplikáciách React.js.

Spôsoby, ako môžete implementovať podmienené vykresľovanie

Aby ste mohli nasledovať tieto príklady, musíte mať základné znalosti o tom, ako React funguje. Ak máte v takom prípade problémy, nebojte sa – máme užitočnú vec príručka pre začiatočníkov k React.js.

Používanie podmienených príkazov

Podobne ako v JavaScripte môžete použiť podmienené príkazy ako if...else na vytvorenie prvkov, keď sú splnené určité podmienky.

Môžete napríklad zobraziť špecifikovaný prvok v ak blokovať, keď je splnená podmienka a zobraziť inú v inak blokovať, ak podmienka nie je splnená.

Zvážte nasledujúci príklad, ktorý zobrazuje tlačidlo prihlásenia alebo odhlásenia v závislosti od stavu prihlásenia používateľa.

function Dashboard (rekvizity) {
 const { isLoggedIn } = rekvizity
 if (isLoggedIn){
 vrátiť Odhlásiť sa
 } inak{
 vrátiť Prihlásiť sa
 }
}

Táto funkcia vykreslí iné tlačidlo v závislosti od isLoggedIn hodnota odovzdaná ako rekvizita.

Súvisiace: Ako používať rekvizity v ReactJS

Prípadne môžete použiť ternárny operátor. Ternárny operátor prevezme podmienku, za ktorou nasleduje kód, ktorý sa vykoná, ak podmienka je pravdivý nasleduje kód, ktorý sa má vykonať, ak je podmienka falošný.

Prepíšte vyššie uvedenú funkciu ako:

function Dashboard (rekvizity) {
 const { isLoggedIn } = rekvizity
 vrátiť (
 <>
 {je prihlásený?Odhlásiť sa:Prihlásiť sa)
 )
}

Ternárny operátor robí funkciu čistejšou a ľahšie čitateľnou v porovnaní s ak...inak vyhlásenie.

Deklarovanie premenných prvkov

Premenné prvkov sú premenné, ktoré môžu obsahovať prvky JSX a v prípade potreby sa vykreslia v aplikácii React.

Premenné prvkov môžete použiť na vykreslenie iba určitej časti komponentu, keď vaša aplikácia spĺňa zadanú podmienku.

Napríklad, ak chcete vykresliť iba tlačidlo prihlásenia, keď používateľ nie je prihlásený, a tlačidlo odhlásenia iba vtedy, keď je prihlásený, môžete použiť premenné prvkov.

function LoginBtn (rekvizity) {
 vrátiť (

 Prihlásiť sa

 );
}
function LogoutBtn (rekvizity) {
 vrátiť (

 Odhlásiť sa

 );
}
function Dashboard() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (pravda)
 }
 const handleLogout = () => {
 setLoggedIn (false)
 }
 nechať tlačidlo;
 if (prihlásený) {
 tlačidlo = 
 } inak {
 tlačidlo = 
 }
 vrátiť (
 <>
 {prihlásený}
 )
}

Vo vyššie uvedenom kóde najskôr vytvorte komponenty tlačidla Prihlásiť a Odhlásiť a potom definujte komponent na vykreslenie každého z nich za iných podmienok.

V tomto komponente použite stavový hák React na sledovanie, kedy je používateľ prihlásený.

Súvisiace: Naučte sa tieto ďalšie háčiky a ovládnite svoje schopnosti reagovať

Teraz, v závislosti od štátu, buď urobte alebo komponent.

Ak používateľ nie je prihlásený, vykreslite súbor komponent inak poskytuj the komponent. Dve funkcie rukoväte zmenia stav prihlásenia po kliknutí na príslušné tlačidlo.

Používanie logických operátorov

Môžete použiť logiku && operátora na podmienené vykreslenie prvku. Tu sa prvok vykreslí iba vtedy, ak sa podmienka vyhodnotí ako pravdivá, inak sa ignoruje.

Ak chcete upozorniť používateľa na počet upozornení, ktoré má iba vtedy, keď má jedno alebo viac upozornení, môžete použiť nasledujúce.

function ShowNotifications (rekvizity) {
 const { oznámenia } = rekvizity
 vrátiť (
 <>
 {notifications.length > 0 &&

 Máte {notifications.length} upozornení.


 }
 )
}

Ďalej, ak chcete vykresliť prvok, ak sa logický výraz && vyhodnotí ako falošná hodnota, zreťazte logické || operátor.

Nasledujúca funkcia zobrazí správu „Nemáte žiadne upozornenia“, ak sa neposlali žiadne upozornenia ako rekvizity.

function ShowNotifications (rekvizity) {
 const { oznámenia } = rekvizity
 vrátiť (
 <>
 {notifications.length > 0 &&

 Máte {notifications.length} upozornení.
 || 
Nemáte žiadne upozornenia

 }
 )
}

Zabráňte vykresľovaniu komponentu

Ak chcete skryť komponent, aj keď bol vykreslený iným komponentom, vráťte namiesto jeho výstupu hodnotu null.

Uvažujme o nasledujúcom komponente, ktorý zobrazuje tlačidlo s upozornením iba vtedy, ak je ako rekvizita odovzdaná varovná správa.

function Upozornenie (rekvizity) {
 const {warningMessage} = rekvizity
 if (!warningMessage) {
 return null
 }
 vrátiť (
 <>
Pozor
 )
}

Teraz, ak odovzdáte „warningMessage“ do komponentu, zobrazí sa varovné tlačidlo. Ak však nie, vráti hodnotu null a tlačidlo sa nezobrazí.

 // tlačidlo varovania sa vykreslí
 // tlačidlo upozornenia sa nevykreslí

Príklady podmieneného vykresľovania v aplikáciách React v reálnom živote

Použite podmienené vykresľovanie na vykonanie rôznych úloh vo vašej aplikácii. Niektoré z nich zahŕňajú vykresľovanie údajov API iba vtedy, keď sú dostupné, a zobrazenie chybového hlásenia iba vtedy, keď existuje chyba.

Vykresľovanie údajov získaných z API v React

Načítanie údajov z rozhrania API môže chvíľu trvať. Preto najprv skontrolujte, či je k dispozícii pred použitím vo vašej aplikácii, inak React vyhodí chybu, ak nie je k dispozícii.

Nasledujúca funkcia ukazuje, ako môžete podmienene vykresliť údaje vrátené rozhraním API.

function FetchData() {
 const [data, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Získanie údajov z API pomocou Axios
 const fetchData = async () => {
 const response = wait axios.get (apiURL)
 // Aktualizácia stavu údajmi
 setData (response.data) 
 }
 vrátiť (
 <>
Astronomický obrázok dňa

 {
 údaje && 
{data.title}

{data.explanation}

 }
 )
}

Vo vyššie uvedenej funkcii získajte údaje z API NASA Apod pomocou Axios. Keď API vráti odpoveď, aktualizujte stav a použite logický operátor && na vykreslenie údajov iba vtedy, keď sú dostupné.

Súvisiace: Ako používať API v React Using Fetch a Axios

Zobrazovanie chybových hlásení

V prípadoch, keď chcete zobraziť chybu iba vtedy, keď existuje, použite podmienené vykresľovanie.

Ak napríklad vytvárate formulár a chcete zobraziť chybové hlásenie, ak používateľ zadal nesprávny formát e-mailu, aktualizujte stav pomocou chybového hlásenia a na jeho vykreslenie použite príkaz if.

function showError() {
 const [error, setError] = useState (null)
 vrátiť (
 <>
 {
 if (chyba) {
Vyskytla sa chyba: {error}

 }
 }
 )
}

Výber toho, čo použiť v aplikácii React

V tomto návode ste sa dozvedeli o niekoľkých spôsoboch, ktoré môžu podmienene vykresliť prvky JSX.

Všetky diskutované metódy poskytujú rovnaké výsledky. Vyberte si, čo chcete použiť, v závislosti od prípadu použitia a úrovne čitateľnosti, ktorú chcete dosiahnuť.

7 najlepších bezplatných návodov na učenie sa React a vytváranie webových aplikácií

Bezplatné kurzy sú len zriedka také komplexné a užitočné – ale našli sme niekoľko kurzov React, ktoré sú vynikajúce a pomôžu vám začať tou správnou nohou.

Prečítajte si ďalej

O autorovi