Podmíněné vykreslování a smyčky React

Podmínky vykreslování a cykly v React se provádějí pomocí podmíněných příkazů a struktur cyklů v JSX.

1. Podmínky vykreslování

- Použití: Strukturu v JSX můžete použít ke kontrole podmínky a vykreslení různých prvků na základě této podmínky. if-else if-else

For příklad:

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

- Použití ternárního operátoru: Můžete také použít ternární operátor ke zkrácení struktury v JSX. if-else

For příklad:

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

- Použití logického operátoru &&: Pokud chcete prvek zobrazit pouze v případě, že je podmínka pravdivá, můžete použít logický operátor &&.

For příklad:

{isLoggedIn && <WelcomeUser />}

2. Vykreslování smyček

- Použití: Metodu můžete použít k iteraci přes pole a vykreslení odpovídajících prvků v JSX. map map

For příklad

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

- Použití for smyčky: Můžete také použít for smyčku k iteraci pole a vykreslení odpovídajících prvků v JSX.

For příklad:

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

- Použití for každého: Můžete také použít for metodu Each k iteraci pole a vykreslení odpovídajících prvků v JSX.

For příklad:

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

Podmínky a smyčky React vám umožňují vytvářet flexibilní a dynamická uživatelská rozhraní. Pomocí podmíněných příkazů a struktur smyček v JSX můžete zobrazit různé prvky a generovat seznamy na základě dat ve vaší React aplikaci.