javascript - Οι τιμές null με συνθήκη OR μέσα σε έκφραση jsx δεν λειτουργούν

Έχω ένα κομμάτι κώδικα που υποτίθεται ότι θα εμφανίσει ένα συστατικό ή ένα στοιχείο div-κρατήρα θέσης.

Έχω τοποθετήσει αυτό μέσα στο μπλοκ επιστροφής ενός άλλου στοιχείου, αλλά δεν μπορώ να καταλάβω γιατί το div του προθέματος δεν εμφανίζεται ποτέ.

Εδώ είναι το κομμάτι του κώδικα στο μπλοκ επιστροφής που αναφέρθηκε:

{renderBannerSummary() || <div className={spacer} />}

Η renderBannerSummary είναι μια συνάρτηση που αποδίδει ένα στοιχείο που κάποιες φορές επιστρέφει null.

Μπορώ να δω ότι το null όντως επιστρέφεται περιστασιακά μέσω της κονσόλας

Μπορώ επίσης να δω ότι αν εξαχθεί ολόκληρη η δήλωση λογικού OR και καταγραφεί, καταγράφει το div κάθε φορά που το renderBannerSummary επιστρέφει null, όπως αναμενόταν:

Λοιπόν, η ερώτησή μου είναι, γιατί συμβαίνει το div spacer να μην εμφανίζεται ποτέ στο περιβάλλον χρήστη όταν η συνάρτηση renderBannerSummary επιστρέφει null/false; Αντ' αυτού, δεν εμφανίζεται τίποτα.

Οποιαδήποτε βοήθεια εκτιμάται, ευχαριστώ

Απάντηση #1

Αυτό θα πρέπει να λειτουργήσει για εσάς:

{ renderBannerSummary() ? renderBannerSummary():<div className={spacer} /> }

Αυτός ο κώδικας θα αποδώσει <div className={spacer}/> αν το renderBannerSummary() είναι null, undefined ή false

Απάντηση #2

Προφανώς η εκφώνηση με το OR υπό όρους δεν θα επιστρέψει ποτέ τη δεξιά πλευρά, καθώς οι αγκύλες {} μέσα στο μέρος render ενός component θα εκτελούν πάντα τον κώδικα, πράγμα που σημαίνει ότι η κλήση της μεθόδου μου θα εκτελείται πάντα, άρα πάντα θα είναι αληθής - μέσα στις {}, ο κώδικάς μου δεν ήταν υπό όρους