Podmíněné vykreslování se týká změny chování aplikace v závislosti na jejím stavu. Můžete například změnit uvítací zprávu vaší aplikace React na tmavou během noci. Tímto způsobem budete mít na displeji různé zprávy v závislosti na denní době.

Podmíněné vykreslování vám umožňuje vykreslit různé komponenty nebo prvky React, pokud je splněna podmínka. V tomto tutoriálu se dozvíte o různých způsobech použití podmíněného vykreslování v aplikacích React.js.

Způsoby, jak můžete implementovat podmíněné vykreslování

Abyste mohli následovat tyto příklady, musíte mít základní znalosti o tom, jak React funguje. Pokud v takovém případě máte potíže, nebojte se – máme užitečnou věc průvodce React.js pro začátečníky.

Použití podmíněných příkazů

Stejně jako v JavaScriptu můžete použít podmíněné příkazy jako if...else k vytvoření prvků, když jsou splněny určité podmínky.

Můžete například zobrazit určený prvek v -li zablokovat, když je splněna podmínka, a zobrazit jinou v jiný blokovat, pokud podmínka není splněna.

Zvažte následující příklad, který zobrazuje tlačítko přihlášení nebo odhlášení v závislosti na stavu přihlášení uživatele.

function Dashboard (rekvizity) {
 const { isLoggedIn } = props
 if (isLoggedIn){
 vrátit se Odhlásit se
 } jinak{
 vrátit se Přihlásit se
 }
}

Tato funkce vykreslí různé tlačítko v závislosti na isLoggedIn hodnota předaná jako rekvizita.

Příbuzný: Jak používat rekvizity v ReactJS

Případně můžete použít ternární operátor. Ternární operátor převezme podmínku následovanou kódem, který se provede, pokud podmínka je pravdivý následovaný kódem, který se má provést, pokud je podmínka splněna falešný.

Přepište výše uvedenou funkci jako:

function Dashboard (rekvizity) {
 const { isLoggedIn } = props
 vrátit se (
 <>
 {isLogged?Odhlásit se:Přihlásit se)
 )
}

Díky ternárnímu operátoru je funkce čistší a snáze čitelná ve srovnání s kdyby…jinak prohlášení.

Deklarace proměnných prvků

Proměnné prvků jsou proměnné, které mohou obsahovat prvky JSX a v případě potřeby je lze vykreslit v aplikaci React.

Proměnné prvku můžete použít k vykreslení pouze určité části komponenty, když vaše aplikace splňuje zadanou podmínku.

Pokud například chcete vykreslit pouze tlačítko přihlášení, když uživatel není přihlášen, a tlačítko odhlášení pouze tehdy, když je přihlášen, můžete použít proměnné prvků.

function LoginBtn (rekvizity) {
 vrátit se (

 Přihlásit se

 );
}
function LogoutBtn (rekvizity) {
 vrátit se (

 Odhlásit se

 );
}
function Dashboard() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (pravda)
 }
 const handleLogout = () => {
 setLoggedIn (false)
 }
 nechat tlačítko;
 if (přihlášen) {
 tlačítko = 
 } jinak {
 tlačítko = 
 }
 vrátit se (
 <>
 {přihlášen}
 )
}

Ve výše uvedeném kódu nejprve vytvořte komponenty tlačítka Přihlášení a odhlášení a poté definujte komponentu k vykreslení každého z nich za jiných podmínek.

V této komponentě použijte React state hook ke sledování, kdy je uživatel přihlášen.

Příbuzný: Naučte se tyto další háčky a ovládněte své schopnosti reagovat

Nyní, v závislosti na stavu, buď vykreslete nebo komponent.

Pokud uživatel není přihlášen, vykreslete soubor složka jinak činí tlE komponent. Dvě funkce rukojeti změní stav přihlášení po kliknutí na příslušné tlačítko.

Použití logických operátorů

Můžete použít logiku && operátor pro podmíněné vykreslení prvku. Zde je prvek vykreslen pouze v případě, že se podmínka vyhodnotí jako pravdivá, jinak je ignorována.

Pokud chcete uživatele upozornit na počet oznámení, která má, pouze když má jedno nebo více oznámení, můžete použít následující.

function ShowNotifications (rekvizity) {
 const { notifications } = rekvizity
 vrátit se (
 <>
 {notifications.length > 0 &&

 Máte {notifications.length} oznámení.


 }
 )
}

Dále, chcete-li vykreslit prvek, pokud se logický výraz && vyhodnotí jako nepravdivá hodnota, zřetězte logické || operátor.

Následující funkce zobrazí zprávu „Nemáte žádná oznámení“, pokud nejsou předána žádná oznámení jako rekvizita.

function ShowNotifications (rekvizity) {
 const { notifications } = rekvizity
 vrátit se (
 <>
 {notifications.length > 0 &&

 Máte {notifications.length} oznámení.
 || 
Nemáte žádná oznámení

 }
 )
}

Zabraňte vykreslení komponenty

Chcete-li komponentu skrýt, přestože byla vykreslena jinou komponentou, vraťte místo jejího výstupu hodnotu null.

Zvažte následující komponentu, která vykreslí varovné tlačítko pouze v případě, že je varovná zpráva předána jako rekvizita.

funkce Varování (rekvizity) {
 const {warningMessage} = rekvizity
 if (!warningMessage) {
 vrátit null
 }
 vrátit se (
 <>
Varování
 )
}

Nyní, pokud předáte „warningMessage“ do komponenta, zobrazí se varovné tlačítko. Pokud však ne, vrátí hodnotu null a tlačítko se nezobrazí.

 // tlačítko varování se vykreslí
 // tlačítko varování se nevykreslí

Příklady podmíněného vykreslování v reálných aplikacích React

Použijte podmíněné vykreslování k provádění různých úkolů ve vaší aplikaci. Některé z nich zahrnují vykreslování dat API pouze tehdy, když jsou k dispozici, a zobrazení chybové zprávy pouze v případě, že existuje chyba.

Vykreslování dat načtených z API v Reactu

Načítání dat z API může chvíli trvat. Před použitím ve vaší aplikaci proto nejprve zkontrolujte, zda je k dispozici, jinak React vyhodí chybu, pokud není k dispozici.

Následující funkce ukazuje, jak můžete podmíněně vykreslit data vrácená rozhraním API.

function FetchData() {
 const [data, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Načtení dat z API pomocí Axios
 const fetchData = async () => {
 const response = wait axios.get (apiURL)
 // Aktualizace stavu pomocí dat
 setData (response.data) 
 }
 vrátit se (
 <>
Astronomický snímek dne

 {
 data && 
{data.title}

{data.explanation}

 }
 )
}

Ve výše uvedené funkci načtěte data z API NASA Apod pomocí Axios. Když rozhraní API vrátí odpověď, aktualizujte stav a použijte logický operátor && k vykreslení dat pouze tehdy, když jsou k dispozici.

Příbuzný: Jak používat API v React Using Fetch a Axios

Zobrazování chybových zpráv

V případech, kdy chcete zobrazit chybu pouze tehdy, když existuje, použijte podmíněné vykreslování.

Pokud například vytváříte formulář a chcete zobrazit chybovou zprávu, pokud uživatel zadal nesprávný formát e-mailu, aktualizujte stav chybovou zprávou a k jejímu vykreslení použijte příkaz if.

function showError() {
 const [chyba, setError] = useState (null)
 vrátit se (
 <>
 {
 if (chyba) {
Došlo k chybě: {error}

 }
 }
 )
}

Výběr toho, co použít v aplikaci React

V tomto kurzu jste se dozvěděli o několika způsobech, jak lze podmíněně vykreslit prvky JSX.

Všechny diskutované metody poskytují stejné výsledky. Vyberte si, co chcete použít, v závislosti na případu použití a na úrovni čitelnosti, které chcete dosáhnout.

7 nejlepších bezplatných výukových programů pro výuku React a vytváření webových aplikací

Bezplatné kurzy jsou jen zřídka tak komplexní a užitečné - ale našli jsme několik kurzů React, které jsou vynikající a dostanou vás na správnou cestu.

Přečtěte si další

O autorovi