Representación condicional en React (jsx)

Básicamente, la condición tiene que evaluarse como verdadera o falsa. Esto es diferente de cómo funcionan los condicionales en js. Esto es lo que quiero decir:

data.length > 0 && <div />

data.length && <div />

En el primer caso, si el tamaño de la matriz es 0, 0 > 0se evaluará, por falselo que se false && [anything really]evaluará como falso, por lo que el componente no se procesará.

En el segundo, sin embargo, si el tamaño es 0, se 0 && <div />evalúa como 0<div />. En otras palabras, se renderizarán tanto 0 como el elemento. Viniendo de js, esperaría que el &&operador coaccione 0 en el lado izquierdo a un booleano (falso) pero eso no sucede, por lo que ambos se renderizan, ¿así es como funciona jsx?

Es de esperar que la declaración 0 && <div />evalúe false. Ese sería realmente el caso fuera de jsx.

const value = data.length ? 1 : 0;

¿Qué tal la siguiente declaración, cuál crees que sería el resultado?

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

Entonces, suponga que se reduce a cómo los operadores binary (&&)y ternary (? :)manejan los condicionales en jsx: uno coacciona (ternario) y el otro no (binario).

¿Qué tal si cambiamos los operandos del operador binario?

<div /> && data.length > 0

Conozco personas que se mantienen alejadas del operador binario en jsx por completo debido a su naturaleza no determinista. Usan el ternario y proporcionan nullcomo operando cuando no quieren que no se represente nada para una evaluación particular.

También encontré que las reglas anteriores funcionan igual para classNames dinámicos .

Digamos que tiene un componente que indica el paso actual en un proceso, y quiere darle un color / comportamiento diferente, extendiendo los estilos para todos los componentes del paso.

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

¿Qué tal usar el nulloperando para la evaluación falsa?

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

¿Qué hay de volverse binario? Bien, veamos…

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

Mi favorito sigue siendo la cadena vacía ''para la evaluación falsa. Déjame saber la técnica que implementas .

Si la forma en que ha diseñado su componente, no heredará ningún estilo, como lo estoy haciendo anteriormente (donde todos los componentes actuales y no actuales tienen una clase principal de step), y probablemente esté dispuesto a duplicar algunas de las reglas ( cuál es el daño) entonces el problema puede volverse mucho más fácil:

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

Aún así, mi favorito es el ''.