mateo c
El problema
Tiene un elemento que le gustaría mostrar u ocultar, por ejemplo, un elemento que se muestra u oculta cuando un usuario hace clic en un botón. ¿Cómo renderizas condicionalmente un elemento?
La solución
Hay tres formas comunes de representar elementos condicionalmente en JSX: usando el operador lógico AND (&&), usando el operador condicional (ternario) y usando unsideclaración.
Uso del operador lógico AND (&&)
Puedes usar eloperador lógico AND (&&)para renderizar condicionalmente un elemento basado en un valor de estado booleano:
exportar función predeterminada MyComponent() { const [isOpen, setIsOpen] = useState(false); function toggle() { setIsOpen((isOpen) => !isOpen); } return (
{isOpen &&);}}
En el código de ejemplo anterior, el componenteSurgirinicialmente no se muestra. Cuando se hace clic una vez en el botón "Alternar mostrar",Esta abiertose establece en verdadero.micomponentere-renderizados y el componenteSurgirse representa como unReaccionar elemento. Si se vuelve a hacer clic en el botón,Esta abiertose establece en falso y elSurgirel componente no se renderiza.
El problema con el uso de la&&operador es que puede terminar procesando involuntariamente0en lugar de nada si el valor a la izquierda de la&&el operador es0, que sería el caso en el siguiente código si elelementosprop era una matriz sin elementos.
function ItemList({ items }) { return (
);}{items.length && items.map((item) =>
- {item.name}
) }
El&&El operador evalúa los valores que compara, los operandos, de izquierda a derecha. Vuelve inmediatamente con el valor de la primerafalsificacionesvalor que encuentra. Si todos los valores sonveraz, se devuelve el último valor evaluado. Esta es la razón por0se mostraría si el valor deartículos.longitudes 0. La longitud de[]es 0. Puede arreglar esto asegurándose de que el valor sea booleano, por ejemplo:
!!items.length && ...// oritems.length > 0 && ...// orBoolean(items.length) && ...
Uso del operador condicional (ternario)
Puedes usar unoperador ternariopara representar condicionalmente un elemento sin tener que preocuparse por convertir valores a booleanos:
function ItemList({elementos}) { return (
);}{elementos.longitud ? elementos.map((elemento) =>
- {elemento.nombre}
) : nulo}
Usando unsideclaración
También puede utilizar unsiinstrucción en lugar de un operador ternario si prefiere la sintaxis:
function ItemList({ items }) { let itemsElements = null; if (items.length) { itemsElements = items.map((item) =>
{item.name} ); } return ();}{elementosElementos}