Pogojno upodabljanje in zanke React

Pogoji upodabljanja in zanke React se izvajajo z uporabo pogojnih stavkov in struktur zanke v JSX.

 

1. Pogoji upodabljanja

- Uporaba: strukturo v JSX lahko uporabite za preverjanje pogoja in upodabljanje različnih elementov na podlagi tega pogoja. if-else if-else

For primer:

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

- Uporaba ternarnega operaterja: za skrajšanje strukture v JSX lahko uporabite tudi ternarni operator. if-else

For primer:

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

- Uporaba logičnega && operatorja: Če želite element prikazati le, če je pogoj resničen, lahko uporabite logični && operator.

For primer:

{isLoggedIn && <WelcomeUser />}

 

2. Upodabljanje zank

- Uporaba: metodo lahko uporabite za ponavljanje po matriki in upodabljanje ustreznih elementov v JSX. map map

For primer

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

- Uporaba for zanke: zanko lahko uporabite tudi for za ponavljanje po matriki in upodabljanje ustreznih elementov v JSX.

For primer:

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

- Uporaba for Every: metodo Every lahko uporabite tudi for za ponavljanje po matriki in upodabljanje ustreznih elementov v JSX.

For primer:

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

 

Pogoji in zanke React vam omogočajo ustvarjanje prilagodljivih in dinamičnih uporabniških vmesnikov. Z uporabo pogojnih stavkov in struktur zanke v JSX lahko prikažete različne elemente in ustvarite sezname na podlagi podatkov v vaši React aplikaciji.