Villkorlig rendering och loopar in React

Återgivningsvillkor och loopar in React görs med hjälp av villkorliga uttalanden och loopstrukturer i JSX.

 

1. Återgivningsvillkor

- Användning: Du kan använda strukturen i JSX för att kontrollera ett villkor och rendera olika element baserat på det villkoret. if-else if-else

For exempel:

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

- Använda den ternära operatorn: Du kan också använda den ternära operatorn för att förkorta strukturen i JSX. if-else

For exempel:

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

- Använda den logiska &&-operatorn: När du bara vill visa ett element om ett villkor är sant, kan du använda den logiska &&-operatorn.

For exempel:

{isLoggedIn && <WelcomeUser />}

 

2. Rendering loopar

- Användning: Du kan använda metoden för att iterera över en array och rendera motsvarande element i JSX. map map

For exempel

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

- Använda en for loop: Du kan också använda en for loop för att iterera över en array och rendera motsvarande element i JSX.

For exempel:

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

- Använda for varje: Du kan också använda for varje metod för att iterera över en array och rendera motsvarande element i JSX.

For exempel:

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

 

Villkor och loopar in React gör att du kan skapa flexibla och dynamiska användargränssnitt. Genom att använda villkorssatser och loopstrukturer i JSX kan du visa olika element och generera listor baserat på data i din React applikation.