Redare condiționată și bucle în React

Condițiile de redare și buclele în React sunt realizate folosind instrucțiuni condiționate și structuri de buclă în JSX.

 

1. Condiții de redare

- Utilizare: Puteți utiliza structura din JSX pentru a verifica o condiție și a reda diferite elemente pe baza acelei condiții. if-else if-else

For exemplu:

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

- Utilizarea operatorului ternar: Puteți utiliza și operatorul ternar pentru a scurta structura în JSX. if-else

For exemplu:

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

- Utilizarea operatorului logic &&: Când doriți să afișați un element doar dacă o condiție este adevărată, puteți utiliza operatorul logic &&.

For exemplu:

{isLoggedIn && <WelcomeUser />}

 

2. Bucle de randare

- Utilizare: Puteți utiliza metoda pentru a itera peste o matrice și a reda elementele corespunzătoare în JSX. map map

For exemplu

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

- Folosirea unei for bucle: puteți utiliza și o for buclă pentru a itera peste o matrice și a reda elementele corespunzătoare în JSX.

For exemplu:

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>;  

- Utilizarea for fiecărei: Puteți utiliza și for metoda Each pentru a itera peste o matrice și a reda elementele corespunzătoare în JSX.

For exemplu:

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

 

Condițiile și buclele React vă permit să creați interfețe de utilizare flexibile și dinamice. Folosind instrucțiuni condiționate și structuri de buclă în JSX, puteți afișa diferite elemente și puteți genera liste pe baza datelor din React aplicația dvs.