Bedingtes Rendern und Einschleifen React

Das Rendern von Bedingungen und Schleifen React erfolgt mithilfe von bedingten Anweisungen und Schleifenstrukturen in JSX.

 

1. Rendering-Bedingungen

- Verwendung: Sie können die Struktur in JSX verwenden, um eine Bedingung zu überprüfen und verschiedene Elemente basierend auf dieser Bedingung zu rendern. if-else if-else

For Beispiel:

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

- Verwendung des Ternäroperators: Sie können den Ternäroperator auch verwenden, um die Struktur in JSX zu verkürzen. if-else

For Beispiel:

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

- Verwendung des logischen &&-Operators: Wenn Sie ein Element nur anzeigen möchten, wenn eine Bedingung wahr ist, können Sie den logischen &&-Operator verwenden.

For Beispiel:

{isLoggedIn && <WelcomeUser />}

 

2. Rendering-Schleifen

- Verwendung: Sie können die Methode verwenden, um ein Array zu durchlaufen und entsprechende Elemente in JSX zu rendern. map map

For Beispiel

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

- Verwenden einer for Schleife: Sie können auch eine for Schleife verwenden, um ein Array zu durchlaufen und entsprechende Elemente in JSX zu rendern.

For Beispiel:

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

- Verwenden von for Each: Sie können die for Each-Methode auch verwenden, um über ein Array zu iterieren und entsprechende Elemente in JSX zu rendern.

For Beispiel:

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

 

Mit Bedingungen und Schleifen React können Sie flexible und dynamische Benutzeroberflächen erstellen. Durch die Verwendung von bedingten Anweisungen und Schleifenstrukturen in JSX können Sie verschiedene Elemente anzeigen und Listen basierend auf Daten in Ihrer React Anwendung generieren.