Sé que se llama lógico y, pero me refiero específicamente a esta forma de usarlo, estaba mirando algunos paquetes jsx y encontré este ejemplo.
const Button = props => ( <button className={'large' in props && 'large'}> {props.children} <style jsx>{`button{ .large {padding: 50px;} `}</style> </button> )¿Qué significa 'grande' en accesorios && 'grande'? Sé que grande es solo una clase, por lo que es irrelevante, pero ¿alguien puede expresar con palabras lo que realmente está haciendo el operador? ¿Es una forma abreviada de algún tipo de declaración if y, de ser así, cómo lo escribiría si no fuera abreviado? ¡¡Espero que esto tenga sentido!!
editar: aquí hay otro ejemplo
<p>{params.categoryName === "rent" ? "rent" : "sale"}</p> {loading ? ( <h1>Loading</h1> ) : listings && listings.length > 0 ? ( <> <ul> {listings.map((listing) => ( <ListingItem listing={listing.data} id={listing.id} /> ))} </ul> </> ) : ( <p>No listings for {params.categoryName}</p> )}¿Está más claro escrito como un ternario?
props.includes("large") ? 'large' : '';
o un buen viejo if/else ?
if(props.includes("large")){ return "large"; } else { return ""; } 'large' in props es lo mismo que props.includes("large") , devuelve un valor booleano. Si el valor booleano es true , la siguiente condición se evalúa con "y" ( && ). Dado que una cadena es verdadera (si tiene una longitud), se devuelve como resultado de la operación, es decir, "large" .
Es simplemente una forma rápida de decir "si x es verdad, devuelva y".
Como dice MDN: "si todos los valores son verdaderos, se devuelve el valor del último operando". ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#description ).
Si no se acortara, podría verse así:
x && y; if(x) { return y; } else { return false; }&& es el operador AND lógico en javascript. El operador lógico AND && devuelve verdadero si ambos operandos son verdaderos y devuelve falso en caso contrario.
Ejemplo 1:
className={'large' in props && 'large'} En el primer ejemplo, 'large' in props && 'large' se usa como un If en línea con operador lógico && que es equivalente a
if('large' in props && 'large'){ return true; } else{ return false; }Ejemplo2:
Del mismo modo, en el segundo ejemplo
listings && listings.length > 0que es equivalente a
if(listings && listings.length > 0) { // display list } else { // no list error message here }Espero que esto responda tu pregunta.