Renderowanie warunkowe i pętle React

Warunki renderowania i pętle w programie React są wykonywane przy użyciu instrukcji warunkowych i struktur pętli w JSX.

 

1. Warunki renderowania

- Używanie: Możesz użyć struktury w JSX, aby sprawdzić warunek i renderować różne elementy w oparciu o ten warunek. if-else if-else

For przykład:

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

- Korzystanie z operatora trójskładnikowego: Możesz także użyć operatora trójskładnikowego, aby skrócić strukturę w JSX. if-else

For przykład:

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

- Używanie operatora logicznego &&: Jeśli chcesz wyświetlić element tylko wtedy, gdy warunek jest spełniony, możesz użyć operatora logicznego &&.

For przykład:

{isLoggedIn && <WelcomeUser />}

 

2. Pętle renderowania

- Używanie: Możesz użyć tej metody do iteracji po tablicy i renderowania odpowiednich elementów w JSX. map map

For przykład

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

- Używanie for pętli: Możesz także użyć for pętli do iteracji po tablicy i renderowania odpowiednich elementów w JSX.

For przykład:

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

- Używając for Each: Możesz także użyć for metody Each do iteracji po tablicy i renderowania odpowiednich elementów w JSX.

For przykład:

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

 

Warunki i pętle React umożliwiają tworzenie elastycznych i dynamicznych interfejsów użytkownika. Używając instrukcji warunkowych i struktur pętli w JSX, możesz wyświetlać różne elementy i generować listy na podstawie danych w swojej React aplikacji.