Απόδοση υπό όρους και βρόχοι μέσα React

Οι συνθήκες απόδοσης και οι βρόχοι μέσα React γίνονται χρησιμοποιώντας εντολές υπό όρους και δομές βρόχων στο JSX.

 

1. Συνθήκες απόδοσης

- Χρήση: Μπορείτε να χρησιμοποιήσετε τη δομή στο JSX για να ελέγξετε μια συνθήκη και να αποδώσετε διαφορετικά στοιχεία βάσει αυτής της συνθήκης. if-else if-else

For παράδειγμα:

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

- Χρήση του τριαδικού τελεστή: Μπορείτε επίσης να χρησιμοποιήσετε τον τριαδικό τελεστή για να συντομεύσετε τη δομή στο JSX. if-else

For παράδειγμα:

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

- Χρήση του λογικού τελεστή &&: Όταν θέλετε να εμφανίσετε ένα στοιχείο μόνο εάν μια συνθήκη είναι αληθής, μπορείτε να χρησιμοποιήσετε τον λογικό τελεστή &&.

For παράδειγμα:

{isLoggedIn && <WelcomeUser />}

 

2. Βρόχοι απόδοσης

- Χρήση: Μπορείτε να χρησιμοποιήσετε τη μέθοδο για επανάληψη σε έναν πίνακα και απόδοση των αντίστοιχων στοιχείων στο JSX. map map

For παράδειγμα

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

- Χρήση for βρόχου: Μπορείτε επίσης να χρησιμοποιήσετε έναν for βρόχο για επανάληψη σε έναν πίνακα και απόδοση των αντίστοιχων στοιχείων στο JSX.

For παράδειγμα:

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

- Χρήση for του καθενός: Μπορείτε επίσης να χρησιμοποιήσετε τη for μέθοδο Every για επανάληψη σε έναν πίνακα και απόδοση των αντίστοιχων στοιχείων στο JSX.

For παράδειγμα:

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

 

Οι συνθήκες και οι βρόχοι React σάς επιτρέπουν να δημιουργείτε ευέλικτες και δυναμικές διεπαφές χρήστη. Χρησιμοποιώντας εντολές υπό όρους και δομές βρόχου στο JSX, μπορείτε να εμφανίσετε διαφορετικά στοιχεία και να δημιουργήσετε λίστες με βάση δεδομένα στην React εφαρμογή σας.