Betinget gjengivelse og løkker inn React

Gjengivelsesbetingelser og løkker i React gjøres ved å bruke betingede setninger og sløyfestrukturer i JSX.

 

1. Gjengivelsesbetingelser

- Bruke: Du kan bruke strukturen i JSX til å sjekke en betingelse og gjengi forskjellige elementer basert på den betingelsen. if-else if-else

For eksempel:

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

- Bruke den ternære operatoren: Du kan også bruke den ternære operatoren for å forkorte strukturen i JSX. if-else

For eksempel:

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

- Bruke den logiske &&-operatoren: Når du bare vil vise et element hvis en betingelse er sann, kan du bruke den logiske &&-operatoren.

For eksempel:

{isLoggedIn && <WelcomeUser />}

 

2. Gjengivelse av løkker

- Bruke: Du kan bruke metoden til å iterere over en matrise og gjengi tilsvarende elementer i JSX. map map

For eksempel

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

- Bruke en for loop: Du kan også bruke en for loop til å iterere over en matrise og gjengi tilsvarende elementer i JSX.

For eksempel:

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

- Bruke for hver: Du kan også bruke for hver-metoden til å iterere over en matrise og gjengi tilsvarende elementer i JSX.

For eksempel:

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

 

Betingelser og løkker React lar deg lage fleksible og dynamiske brukergrensesnitt. Ved å bruke betingede utsagn og sløyfestrukturer i JSX kan du vise ulike elementer og generere lister basert på data i React applikasjonen din.