A feltételes renderelés egy alkalmazás viselkedésének megváltoztatását jelenti az állapotától függően. Például az éjszaka folyamán sötétre állíthatja a React alkalmazás üdvözlő üzenetét. Így a napszaktól függően eltérő kijelzőüzenetet kap.

A feltételes renderelés lehetővé teszi különböző React komponensek vagy elemek megjelenítését, ha egy feltétel teljesül. Ebben az oktatóanyagban megismerheti a feltételes renderelés különböző módjait a React.js alkalmazásokban.

A feltételes renderelés megvalósításának módjai

A példák követéséhez alapvető ismeretekkel kell rendelkeznie a React működéséről. Ha ebben az esetben nehézségekkel küzd, ne aggódjon – van egy hasznos eszközünk kezdőknek szóló útmutató a React.js-hez.

Feltételes kijelentések használata

A JavaScripthez hasonlóan feltételes utasításokat is használhat (például if…else) elemek létrehozásához, ha bizonyos feltételek teljesülnek.

Például megjeleníthet egy megadott elemet a ha blokkolja, ha egy feltétel teljesül, és egy másikat jelenít meg a más blokkolja, ha a feltétel nem teljesül.

Tekintsük a következő példát, amely a felhasználó bejelentkezési állapotától függően egy bejelentkezési vagy kijelentkezési gombot jelenít meg.

function Irányítópult (kellékek) {
 const { isLoggedIn } = kellékek
 if (Bejelentkezett){
 Visszatérés Kijelentkezés
 } más{
 Visszatérés Belépés
 }
}

Ez a funkció a gombtól függően más-más gombot jelenít meg be van jelentkezve támaszként átadott érték.

Összefüggő: A kellékek használata a ReactJS-ben

Alternatív megoldásként használhatja a háromtagú operátort is. A háromtagú operátor felvesz egy feltételt, amelyet a végrehajtandó kód követ, ha a feltétel teljesül igazmondó ezt követi a végrehajtandó kód, ha a feltétel az hamis.

Írja át a fenti függvényt a következőképpen:

function Irányítópult (kellékek) {
 const { isLoggedIn } = kellékek
 Visszatérés (
 <>
 {isLogged?Kijelentkezés:Belépés)
 )
}

A háromtagú operátor tisztábbá és könnyebben olvashatóvá teszi a funkciót, mint a ha más nyilatkozat.

Elemváltozók deklarálása

Az elemváltozók olyan változók, amelyek JSX elemeket tartalmazhatnak, és szükség esetén előállíthatók a React alkalmazásban.

Az elemváltozók segítségével az összetevőnek csak egy bizonyos részét jelenítheti meg, ha az alkalmazás megfelel a megadott feltételnek.

Például, ha csak egy bejelentkezési gombot szeretne megjeleníteni, amikor a felhasználó nincs bejelentkezve, és egy kijelentkezési gombot csak akkor, ha be van jelentkezve, használhat elemváltozókat.

function LoginBtn (props) {
 Visszatérés (

 Belépés

 );
}
function LogoutBtn (props) {
 Visszatérés (

 Kijelentkezés

 );
}
function Dashboard() {
 const [loggedIn, setLoggedIn] = useState (igaz)
 const handleLogin = () => {
 setLoggedIn (igaz)
 }
 const handleLogout = () => {
 setLoggedIn (hamis)
 }
 engedje gomb;
 if (bejelentkezve) {
 gomb = 
 } más {
 gomb = 
 }
 Visszatérés (
 <>
 {bejelentkezve}
 )
}

A fenti kódban először létre kell hozni a Bejelentkezés és kijelentkezés gomb összetevőit, majd meghatározni a összetevőt, hogy mindegyiket különböző feltételek mellett jelenítse meg.

Ebben az összetevőben a React state hook segítségével nyomon követheti, hogy a felhasználó mikor van bejelentkezve.

Összefüggő: Sajátítsa el reagálási készségeit, ha megtanulja ezeket a kiegészítő kampókat

Most, az államtól függően, tegye a vagy összetevő.

Ha a felhasználó nincs bejelentkezve, jelenítse meg a komponens egyébként rendereli the összetevő. A két fogantyú funkció megváltoztatja a bejelentkezési állapotot, amikor a megfelelő gombra kattintanak.

Logikai operátorok használata

Használhatja a logikát && operátort egy elem feltételes megjelenítéséhez. Itt egy elem csak akkor jelenik meg, ha a feltétel kiértékelése igaz, ellenkező esetben figyelmen kívül hagyja.

Ha csak akkor szeretné értesíteni a felhasználót az értesítések számáról, ha egy vagy több értesítése van, akkor használja a következőket.

function ShowNotifications (kellékek) {
 const { értesítések } = kellékek
 Visszatérés (
 <>
 {notifications.length > 0 &&

 {notifications.length} értesítése van.


 }
 )
}

Ezután egy elem megjelenítéséhez, ha a logikai && kifejezés hamis értéket kap, láncolja a logikai || operátor.

A következő funkció a „Nincsenek értesítések” üzenetet jeleníti meg, ha nem adnak át értesítést kellékként.

function ShowNotifications (kellékek) {
 const { értesítések } = kellékek
 Visszatérés (
 <>
 {notifications.length > 0 &&

 {notifications.length} értesítése van.
 || 
Nincsenek értesítései

 }
 )
}

Akadályozza meg, hogy egy komponens rendereljen

Egy komponens elrejtéséhez annak ellenére, hogy egy másik komponens előállította, a kimenet helyett adjon vissza nullát.

Tekintsük a következő összetevőt, amely csak akkor jelenít meg figyelmeztető gombot, ha egy figyelmeztető üzenetet kellékként továbbít.

function Figyelmeztetés (kellékek) {
 const {warningMessage} = kellékek
 if (!warningMessage) {
 nulla visszaadás
 }
 Visszatérés (
 <>
Figyelem
 )
}

Most, ha átadja a „figyelmeztető üzenetet” a komponens, figyelmeztető gomb jelenik meg. Ha azonban nem, nullát ad vissza, és a gomb nem jelenik meg.

 // megjelenik a figyelmeztető gomb
 // a figyelmeztető gomb nem jelenik meg

Példák a feltételes renderelésre valós életű reagáló alkalmazásokban

Használjon feltételes renderelést különböző feladatok végrehajtásához az alkalmazásban. Ezek némelyike ​​magában foglalja az API-adatok megjelenítését, ha azok elérhetők, és csak hiba esetén jelenítenek meg hibaüzenetet.

API-ból lekért adatok megjelenítése a Reactban

Az adatok API-ból való lekérése eltarthat egy ideig. Ezért először ellenőrizze, hogy elérhető-e, mielőtt az alkalmazásban használná, különben a React hibát jelez, ha nem érhető el.

A következő függvény bemutatja, hogyan lehet feltételesen előállítani az API által visszaadott adatokat.

function FetchData() {
 const [adatok, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Adatok lekérése az API-ból az Axios használatával
 const fetchData = async () => {
 const response = várjon axios.get (apiURL)
 // Állapot frissítése az adatokkal
 setData (response.data) 
 }
 Visszatérés (
 <>
A nap csillagászati ​​képe

 {
 adatok && 
{data.title}

{data.explanation}

 }
 )
}

A fenti függvényben kérje le az adatokat a NASA Apod API Axios használatával. Amikor az API választ ad vissza, frissítse az állapotot, és használja a logikai && operátort, hogy csak akkor jelenítse meg az adatokat, ha azok elérhetők.

Összefüggő: API-k használata a Reactban a Fetch és Axios használatával

Hibaüzenetek megjelenítése

Azokban az esetekben, amikor a hibát csak akkor szeretné megjeleníteni, ha az létezik, használjon feltételes megjelenítést.

Például, ha egy űrlapot hoz létre, és hibaüzenetet szeretne megjeleníteni, ha a felhasználó rossz e-mail-formátumot írt be, frissítse az állapotot a hibaüzenettel, és használja az if utasítást a megjelenítéséhez.

function showError() {
 const [hiba, setError] = useState (null)
 Visszatérés (
 <>
 {
 if (hiba) {
Hiba történt: {error}

 }
 }
 )
}

A React alkalmazásban használni kívánt elemek kiválasztása

Ebben az oktatóanyagban megismerhette a JSX-elemek feltételes megjelenítésének számos módját.

Az összes tárgyalt módszer ugyanazt az eredményt adja. A használati esettől és az elérni kívánt olvashatóság szintjétől függően válassza ki, hogy mit használ.

7 legjobb ingyenes oktatóanyag a reagálás megtanulásához és a webalkalmazások készítéséhez

Az ingyenes tanfolyamok ritkán olyan átfogóak és hasznosak – de találtunk több olyan React tanfolyamot, amelyek kiválóak, és a megfelelő lábon segítenek.

Olvassa el a következőt

A szerzőről