Το JSX μπορεί να αποδώσει οποιαδήποτε JavaScript έκφραση, επομένως η υπό όρους απόδοση είναι απλώς κανονικό JS που χρησιμοποιείται μέσα σε { }.
jsx
() {
(
);
}
Το JSX μπορεί να αποδώσει οποιαδήποτε JavaScript έκφραση, επομένως η υπό όρους απόδοση είναι απλώς κανονικό JS που χρησιμοποιείται μέσα σε { }.
() {
(
);
}
cond && <X/> — αποδώστε το <X/> όταν το cond είναι αληθές, διαφορετικά τίποτα. Σπουδαίο για "εμφάνιση ή απόκρυψη".cond ? <A/> : <B/> — διαλέξτε μεταξύ δύο κλάδων.null για να μην αποδώσετε τίποτα.&& με αριθμούς{count && <Badge n={count} />} // ❌ when count === 0, React renders "0" on screen!
{count > 0 && <Badge n={count} />} // ✅ guard with a real boolean
Αυτό συμβαίνει επειδή 0 && x αποτιμάται σε 0, και το React αποδίδει τον αριθμό 0 (αλλά όχι false/null/undefined).
Όταν η λογική γίνει περίπλοκη, υπολογίστε το στοιχείο πριν από την επιστροφή για καλύτερη αναγνωσιμότητα:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
Αυτό διατηρεί το JSX επίπεδο και τη λογική απόφασης σαφή.