Cuando tengo más de 2 opciones para el estilo condicional en React, prefiero no tener condiciones ternarias dentro de las condiciones ternarias, así que uso una función de autoinvocación como esta:
const HeaderLink = ({
label,
linkTo,
firstItem = false,
lastItem = false,
}: {
label: string;
linkTo: string;
firstItem?: boolean;
lastItem?: boolean;
}) => {
return (
<div
id="HeaderLink"
style={{
padding: (() => {
if (firstItem) return "0 1vw 0 0";
if (lastItem) return "0 0 0 1vw";
return "0 1vw";
})(),
}}
>
<Link href={linkTo}>{label}</Link>
</div>
);
};
Funciona, pero ¿hay una forma más inteligente? ¿Hay razones para evitar este patrón?
Pero incluso si no lo hace, incluso en ese caso, es posible que desee tener un tiempo fácil para leer su código y definir la función solo una vez. En lugar de una función de autoinvocación, puede crear una función, como
function getWV(firstValue, secondValue) {
alert("I have been executed");
//...do your stuff
}
//proof-of-concept
getWV('a', 'b');
El ejemplo anterior muestra que puede lograr una sola línea en su código de renderizado, solo llamando a la función en lugar de definirla cada vez que la renderiza y oscureciendo la legibilidad del renderizador.
let array = ["0 1vw 0 0", "0 0 0 1vw", "0 1vw"];
function getItem(items)
{
let filteredArray = items.filter((item) => !!item);
if (filteredArray.length) return array[items.indexOf(filteredArray[0])];
return array[items.length];
}
console.log(getItem([null, 3]));
console.log(getItem([null, 0]));
A primera vue, este código puede no parecer mucho mejor que el suyo, pero imagine el caso en el que puede tener más de dos valores. En ese if , tendría tantos condicionales como elementos, mientras que el enfoque anterior es mucho más dinámico.