Πώς αποδίδεται ένα συστατικό ανάλογα με μια συνθήκη…

Συνήθως χρησιμοποιούνται οι ακόλουθες προσεγγίσεις:

Προβολή υπό όρους με τριπλό τελεστή ή if: Ο πιο απλός τρόπος.

// Παράδειγμα με τριπλό τελεστή στο React
function ΤοΣυστατικόΜου({ είναιΣυνδεδεμένος }) {
  return (
    <div>
      {είναιΣυνδεδεμένος ? (
        <p>Γειά σου, χρήστη!</p>
      ) : (
        <button>Σύνδεση</button>
      )}
    </div>
  );
}

// Παράδειγμα με if μέσα σε λειτουργικό συστατικό
function ΆλλοΣυστατικό({ φόρτωση }) {
  if (φόρτωση) {
    return <p>Φόρτωση...</p>;
  }
  return <h1>Τα δεδομένα φορτώθηκαν!</h1>;
}

Λογικός τελεστής AND (&&): Χρησιμοποιείται όταν θέλετε να εμφανίσετε ένα συστατικό μόνο αν η συνθήκη είναι αληθής.

// Παράδειγμα με && στο React
function Μηνύματα({ αριθμός }) {
  return (
    <div>
      {αριθμός > 0 && <p>Έχετε {αριθμός} νέα μηνύματα.</p>}
    </div>
  );
}

Χρήση συναρτήσεων και παιδικών συστατικών: Επιτρέπει την απομόνωση της λογικής απόδοσης σε ξεχωριστές συναρτήσεις ή συστατικά για καλύτερη αναγνωσιμότητα και επαναχρησιμοποίηση.

// Παράδειγμα με συνάρτηση στο React
function απόδοσηΠεριεχομένου(ρόλοςΧρήστη) {
  if (ρόλοςΧρήστη === 'διαχειριστής') {
    return <AdminPanel />;
  } else if (ρόλοςΧρήστη === 'χρήστης') {
    return <ΠροφίλΧρήστη />;
  }
  return <ΣελίδαΣύνδεσης />;
}

function App({ ρόλος }) {
  return (
    <div>
      {απόδοσηΠεριεχομένου(ρόλος)}
    </div>
  );
}

Πίνακες και μέθοδος map: Για την εμφάνιση λίστας συστατικών βάσει δεδομένων.

// Παράδειγμα με map στο React
function ΛίσταΕιδών({ είδη }) {
  return (
    <ul>
      {είδη.map(είδος => (
        <li key={είδος.id}>{είδος.όνομα}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Κρύβει ή εμφανίζει ένα στοιχείο, αλλά το συστατικό εξακολουθεί να αποδίδεται. Κατάλληλο για απλές περιπτώσεις όπου η κατάσταση δεν επηρεάζει τη δομή του DOM.

/* Παράδειγμα CSS */
.κρυφό {
  display: none;
}

// Παράδειγμα εφαρμογής CSS κλάσης στο React
function ΕναλλασσόμενοΠεριεχόμενο({ είναιΟρατό }) {
  return (
    <div className={είναιΟρατό ? '' : 'κρυφό'}>
      <p>Αυτό το περιεχόμενο κρύβεται.</p>
    </div>
  );
}

Η επιλογή της μεθόδου εξαρτάται από τη δυσκολία της συνθήκης και τη δομή του συστατικού. Για απλές συνθήκες, συχνά αρκεί ο τριπλός τελεστής ή το &&. Για πιο σύνθετα σενάρια και καλύτερη οργάνωση του κώδικα, συνιστάται η χρήση ξεχωριστών συναρτήσεων ή συστατικών. Να είστε προσεκτικοί με τη χρήση CSS display / visibility αν δεν απαιτείται η πλήρης αφαίρεση του στοιχείου από το DOM.

Πώς αποδίδεται ένα συστατικό ανάλογα με μια συνθήκη;