Estoy bastante atascado en un operador ternario refactorizado mientras aprendo a reaccionar. Aquí está el código que encontré dentro de un JSX:
{props.openSpots === 0 && <div className="card--badge">SOLD OUT</div>}Me gustaría preguntar por qué esto devolverá la tarjeta - ¿div de insignia? Solo estoy familiarizado con el operador ternario común completo que se ve así:
{props.openSpots === 0 ? <div className="card--badge">SOLD OUT</div> : null}Muchísimas gracias.
El operador AND busca el second argumento si el first argumento es true .
Pero, si el first argumento es false , no busca el second argumento y devuelve directamente false .
declaración true && == declaración;
declaración false && == falsa;
console.log( true && "I am visible" ) console.log( ' ' && "I am visible" ) console.log( false && "I am not visible" ) console.log( 0 && "I am not visible" ) console.log( null && "I am not visible" ) console.log( undefined && "I am not visible" ) console.log( true && '' && "I am not visible" )De la documentación de reacción:
Funciona porque en JavaScript, la expresión verdadera && siempre se evalúa como expresión, y la expresión falsa && siempre se evalúa como falsa.
Por lo tanto, si la condición es verdadera, el elemento justo después de && aparecerá en la salida. Si es falso, React lo ignorará y lo omitirá.
Consulte: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator