Establecer condicionalmente los valores de className en React

1. Establezca el nombre de clase condicionalmente en React
2. Use el operador ternario para establecer el nombre de clase condicionalmente en React
3. Use el paquete classNames para establecer el className condicionalmente en React
4. Use la función clsx() para establecer el nombre de clase condicionalmente en React

Cuando los clientes en línea estaban contentos de tener un único destino para comprar en línea, los días quedaron atrás. En estos días, los usuarios de Internet tienen innumerables opciones para pasar tiempo en línea y sus expectativas sobre la experiencia del cliente están aumentando.

Las empresas están bajo una presión cada vez mayor para desarrollar sitios web fáciles de usar, que pueden parecer simples, pero requieren mucho trabajo para desarrollar y mantener.

Establezca el nombre de clase condicionalmente en React

React es un marco popular basado en JavaScript para desarrollar la interfaz de usuario del sitio web. Utiliza el lenguaje de plantillas JSX, como HTML pero tiene características dinámicas.

Una de las mayores ventajas de JSX es que le permite aplicar atributos de forma condicional. Las clases se establecen usando el atributo className (clase es una palabra reservada en React).

Los estilos en línea se pueden configurar usando el atributo estilos.

Establecer condicionalmente el atributo className puede ser útil de muchas maneras. Por ejemplo, podría implementar un elemento de cambio que permita a los usuarios alternar entre los modos oscuro y claro.

Las condiciones que determinan el valor final del atributo className dependen de los valores de los objetos state o props. El estado se utiliza para mantener y actualizar variables en función de las entradas del usuario, como un campo de texto o el valor de un botón de casilla de verificación.

El objeto Props contiene datos transmitidos de un componente principal a un componente secundario. Cambiar los valores de props y className activa una nueva representación de todo el componente, ejecutando la comparación y actualizando el valor de la propiedad className.

Sin más preámbulos, veamos cómo aplicar estilos condicionalmente.

Use el operador ternario para establecer el nombre de clase condicionalmente en React

JSX le permite establecer atributos iguales a expresiones JavaScript válidas que devuelven un valor determinado. Por ejemplo, className="dark" siempre establecería className en 'dark'.

En su lugar, puede establecer el valor del atributo className en una expresión de JavaScript, que evalúa ciertas variables para determinar el valor del atributo className. Echemos un vistazo al ejemplo.

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={dark ? "dark" : ""}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

Puede probar la demostración en vivo usted mismo.

En este caso, usamos llaves dobles para establecer el atributo className igual a un operador ternario, que determina el valor final de className dependiendo del valor de la variable de estado dark. Si es cierto, JavaScript aplicará la cadena 'oscura' como valor; si no, no aplicará nada.

También podríamos indicarle que aplique cualquier cadena X si la variable de estado oscura es verdadera y cualquier cadena Y si es falsa.

También podría tener una combinación de cadenas className que siempre deberían aplicarse y aquellas que deberían aplicarse condicionalmente. Vamos a ver.

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={`large ${dark ? "dark" : ""}`}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

En este caso, el atributo className tendrá un valor de 'grande' sin importar qué, y también aplicará className 'dark' si la variable de estado es true.

Los literales de plantilla (``) son la característica más reciente de JavaScript ES6. Dado que React se basa en JavaScript, también puede usarlos en aplicaciones React.

Use el paquete classNames para establecer el className condicionalmente en React

La comunidad de JavaScript desarrolló un paquete classNames para establecer fácilmente condiciones para aplicar valores al atributo className de forma condicional. Para instalarlo, ingrese el siguiente comando en su CLI.

npm install classnames

Entonces puedes hacer lo siguiente.

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={classNames({"large": true, "nightMode": dark})}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

Tenemos un argumento de objeto para la función classNames(), donde los pares clave-valor representan los valores de className y las condiciones para aplicarlos.

El valor 'grande' siempre se aplicará en el ejemplo anterior ya que su valor se establece en true. El 'nightMode' solo se aplicará al atributo className si la variable de estado dark se evalúa como true.

Use la función clsx() para establecer el nombre de clase condicionalmente en React

Dado que los desarrolladores de JavaScript a menudo necesitan aplicar clases de forma condicional, también desarrollaron la función clsx() para abordar este problema.

La función clsx() se puede utilizar de muchas formas. Exploremos cómo se vería nuestra aplicación si configuramos el atributo className usando la función clsx().

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={clsx({"large": true, "nightMode": dark})}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

Para obtener más información sobre la función, lo que devuelve y cómo funciona, consulte la página oficial de npm.