Betinget gengivelse og løkker ind React

Gengivelsesbetingelser og sløjfer i React udføres ved hjælp af betingede sætninger og sløjfestrukturer i JSX.

 

1. Gengivelsesbetingelser

- Brug af: Du kan bruge strukturen i JSX til at kontrollere en betingelse og gengive forskellige elementer baseret på den betingelse. 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>  
   );  
  }  
}

- Brug af den ternære operator: Du kan også bruge den ternære operator til at forkorte strukturen i JSX. if-else

For eksempel:

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

- Brug af den logiske &&-operator: Når du kun vil vise et element, hvis en betingelse er sand, kan du bruge den logiske &&-operator.

For eksempel:

{isLoggedIn && <WelcomeUser />}

 

2. Gengivelse af løkker

- Brug: Du kan bruge metoden til at iterere over et array og gengive tilsvarende elementer i JSX. map map

For eksempel

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

- Brug af en for loop: Du kan også bruge en for loop til at iterere over et array og gengive 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>;  

- Brug af for hver: Du kan også bruge for hver metode til at iterere over et array og gengive 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 sløjfer i React giver dig mulighed for at skabe fleksible og dynamiske brugergrænseflader. Ved at bruge betingede sætninger og loop-strukturer i JSX kan du vise forskellige elementer og generere lister baseret på data i din React applikation.