Uvjetno iscrtavanje i petlje React

Uvjeti generiranja i petlje React se izvode pomoću uvjetnih naredbi i struktura petlji u JSX-u.

 

1. Uvjeti renderiranja

- Korištenje: možete koristiti strukturu u JSX-u za provjeru uvjeta i renderiranje različitih elemenata na temelju tog uvjeta. if-else if-else

For primjer:

function List({ list }) {  
  if(!list) {  
    return null;  
  }  
  
  if(!list.length) {  
    return <p>Sorry.</p>;  
  } else {  
    return( 
      <div>  
        {list.map(item => <ListItem item={item} />)}  
      </div>  
   );  
  }  
}

- Korištenje ternarnog operatora: Također možete koristiti ternarni operator da skratite strukturu u JSX-u. if-else

For primjer:

 {isLoggedin ? <WelcomeUser />: <Login />}

- Korištenje logičkog && operatora: Kada želite prikazati element samo ako je uvjet istinit, možete koristiti logički && operator.

For primjer:

{isLoggedIn && <WelcomeUser />}

 

2. Petlje renderiranja

- Korištenje: možete koristiti metodu za ponavljanje niza i renderiranje odgovarajućih elemenata u JSX-u. map map

For primjer

 {users.map((user) =>( 
       <li key={user.id}>{user.name}</li>  
))}

- Korištenje for petlje: možete također koristiti for petlju za ponavljanje niza i renderiranje odgovarajućih elemenata u JSX-u.

For primjer:

let usersList = [];
for(let i = 0; i < users.length; i++) {  
  usersList.push(<li key={users[i].id}>{users[i].name}</li>);  
}  
return <ul>{usersList}</ul>;  

- Korištenje for Every: Također možete koristiti for metodu Every za ponavljanje niza i renderiranje odgovarajućih elemenata u JSX-u.

For primjer:

let usersList = [];  
users.forEach((user) => {  
  usersList.push(<li key={user.id}>{user.name}</li>);  
});  
return <ul>{usersList}</ul>;

 

Uvjeti i petlje React vam omogućuju stvaranje fleksibilnih i dinamičnih korisničkih sučelja. Upotrebom uvjetnih izjava i struktura petlje u JSX-u možete prikazati različite elemente i generirati popise na temelju podataka u vašoj React aplikaciji.