Agregue varios nombres de clase al componente React

1. Use el método de literales de plantilla para agregar múltiples classNames al componente React
2. Use el paquete classnames para agregar múltiples classNames al componente React
3. Use el paquete classnames y el método .map para agregar múltiples classNames al componente React
4. Conclusión

classNames en React realiza la misma función que las clases en JavaScript. Se usan en lugar de clases porque class es una palabra reservada en React.

Agregar múltiples classNames a un componente nos da espacio para establecer algunas condiciones para ese componente. Se usa un className para establecer el estilo; el otro se utiliza para establecer las condiciones.

Esto es ideal cuando estamos creando páginas web que tendrán botones.

Además, es posible que deseemos agregar un estilo adicional a un componente para sobrescribir el estilo original en ciertas situaciones. Agregar un className adicional nos permite hacer esto sin problemas.

Además, el uso de múltiples classNames para establecer el estilo hace que los archivos CSS sean más fáciles de leer, rastrear y ajustar, ya que un solo className podría sobrecargarse con demasiados estilos. Además, en situaciones en las que varias clases de CSS tienen atributos similares, debemos crear otra clase para atributos similares para facilitar las correcciones y complementos.

Veamos diferentes formas de agregar múltiples classNames a un componente.

Use el método de literales de plantilla para agregar múltiples classNames al componente React

Los literales de plantilla, también llamados cadenas de plantilla, permiten a los usuarios crear y manipular múltiples expresiones envueltas en acentos graves, seguidas del signo $ y llaves.

Crearemos un ejemplo de página web de botón que muestre el efecto de múltiples classNames usando estilos CSS junto con él. Navega hasta el archivo App.js de nuestra carpeta de proyecto y escribe estos códigos:

Fragmento de código- App.js:

import React from "react";
import "./App.css";
export default function App() {
  const [classNames, setClassNames] = React.useState(``);
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false);
  React.useEffect(() => {
    setClassNames(`${showRed ? "red" : ""} ${showBlue ? "blue" : ""}`);
  }, [showRed, showBlue]);
  return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames}>hit me!</div>
    </div>
  );
}

Los literales de plantilla son útiles para acomodar classNames cuando llamamos a las funciones setClassNames. Aquí es donde podemos configurar nuestras clases red y blue, respectivamente.

Luego haremos un poco de codificación dentro del archivo App.css:

Fragmento de código- App.css:

.red {
  color: red;
}.blue {
  background-color: lightblue;
  width: 50px;
}

Producción:

Usamos el detector de eventos button onClick para decirle a React qué hacer cuando se presiona cualquiera de los botones. Cuando presionamos uno de los botones, podemos ver que un className se activa, y cuando presionamos el otro botón, se invoca el otro className y los colores cambian.

Use el paquete classnames para agregar múltiples classNames al componente React

Una de las razones por las que React es ampliamente aceptado es porque tiene un espacio ilimitado para posibles desarrollos y ajustes, gracias a sus paquetes de dependencia.

El paquete classnames es otro método que podemos aplicar para agregar múltiples classNames a un componente. Nos ayuda a escribir menos código que el método de literales de plantilla y se aplica mejor cuando se trata de más de dos classNames.

Una vez que hayamos creado nuestra carpeta de proyecto, navegaremos a la carpeta de proyecto aún dentro de la interna e instalaremos el paquete classnames con:

npm install classnames

Luego, comenzamos a codificar, comenzando con el archivo App.js.

Estamos usando el mismo estilo que el primer ejemplo. No repetiremos el fragmento de CSS aquí.

Fragmento de código- App.js:

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false); return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames({ red: showRed, blue: showBlue })}>
        hello
      </div>
    </div>
  );
}

Producción:

El paquete classnames se aplica y envuelve en un div, donde establecemos los classNames para cada uno de nuestros componentes, y luego usamos el detector de eventos onClick para cambiar los estados de cada clase.

Podemos ver que cada className se activa o desactiva cuando hacemos clic en cualquiera de los botones asignados a las clases.

Use el paquete classnames y el método .map para agregar múltiples classNames al componente React

Si queremos aplicar el mismo estilo a varias clases simultáneamente, podemos usar el paquete classnames junto con el método .map. El método .map es una función de JavaScript que nos ayuda a llevar una función a través de elementos similares.

Una vez que hayamos creado nuestra carpeta de proyecto, navegaremos a la carpeta de proyecto aún dentro de la interna, e instalaremos el paquete classnames con:

npm install classnames

A continuación, procedemos a la codificación; primero, con el archivo App.js:

Fragmento de código- App.js:

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  return (
    <div>
      {["foo", "bar", "baz"].map(buttonType => (
        <button
          className={classNames({ [`btn-${buttonType}`]: showRed })}
          onClick={() => setShowRed(showRed => !showRed)}
        >
          Button {buttonType}
        </button>
      ))}
    </div>
  );
}

Después de declarar nuestros classNames, la función .map asigna las tres clases al objeto buttonType. Esto nos permitirá pasar la misma función a través de múltiples clases.

Entonces, nuestro App.css se verá así:

.btn-foo,
.btn-bar,
.btn-baz {
  color: red;
}

Producción:

Asignamos el mismo color a todas las clases, y el detector de eventos onClick activó esta función CSS cuando alternamos cualquier botón.

Conclusión

Trabajar con múltiples clases en React nos permite probar diferentes combinaciones, por lo que tenemos diferentes formas de sortear un obstáculo. Y debido a que nos permitirá llevar a cabo múltiples estilos y condiciones dentro de un componente, la codificación es mucho más flexible y podemos detectar errores y fallas con precisión milimétrica.