Rendering condizionale in React (jsx)

Fondamentalmente la condizione deve valutare vero o falso. Questo è diverso da come funzionano i condizionali in js. Ecco cosa intendo:

data.length > 0 && <div />

data.length && <div />

Nel primo caso, se la dimensione della matrice è 0, 0 > 0valuterà per falsecosì false && [anything really]restituisce false, quindi il componente non sarà reso.

Nella seconda, invece, se la dimensione è 0, 0 && <div />restituisce 0<div />. In altre parole, verranno resi sia 0 che l'elemento. Provenendo da js, mi aspetterei che l' &&operatore forzi 0 sul lato sinistro a un booleano (falso), ma ciò non accade, quindi entrambi vengono renderizzati: è come funziona jsx?

Ti aspetteresti che l'istruzione 0 && <div />valuti come false. Questo sarebbe effettivamente il caso al di fuori di jsx.

const value = data.length ? 1 : 0;

Che ne dici della seguente dichiarazione, quale pensi che sarebbe il risultato?

data.length ? <div />: <err />;

Quindi immagino che si riduca al modo in cui gli operatori binary (&&)e ternary (? :)gestiscono i condizionali in jsx: uno forza (ternario) e l'altro no (binario).

Che ne dici se cambiassimo gli operandi dell'operatore binario?

<div /> && data.length > 0

Conosco persone che stanno alla larga dall'operatore binario in jsx a causa della sua natura non deterministica. Usano il ternario e forniscono nullcome operando quando non vogliono che venga reso nulla per una particolare valutazione.

Ho anche trovato che le regole di cui sopra funzionano allo stesso modo per le classNames dinamiche .

Supponiamo che tu abbia un componente che indica il passaggio corrente in un processo e desideri dargli un colore/comportamento diverso, estendendo gli stili per tutti i componenti del passaggio.

<div className={`step ${current ? 'current' : ''}`} />

Che ne dici di usare l' nulloperando per la falsa valutazione?

<div className={`step ${current ? 'current' : null}`} />

Che ne dici di andare in binario? Bene vediamo…

<div className={`step ${current && 'current'}`} />

Il mio preferito è ancora la stringa vuota ''per la falsa valutazione. Fammi sapere la tecnica che utilizzi .

Se il modo in cui hai progettato il tuo componente non erediterà alcuno stile, come sto facendo sopra (dove tutti i componenti correnti e non correnti hanno una classe genitore di step) - e probabilmente sei disposto a duplicare alcune delle regole ( qual è il danno) allora il problema può diventare molto più semplice:

<div className={current ? 'current' : 'not-current'} />

Comunque, il mio preferito è il ''.