Usando múltiples nombres de clases en React

Al desarrollar aplicaciones complejas, no es inusual tener elementos HTML con múltiples clases. Si está familiarizado con HTML y CSS, probablemente esté familiarizado con la sintaxis para configurar varias clases. En este artículo, veremos varias formas diferentes de hacer esto en React.

Múltiples nombres de clases en React

La mayoría de los desarrolladores de React usan JSX, que es una sintaxis especial para escribir definiciones de componentes simples. Su sintaxis es muy similar a HTML, por lo que es preferido por la mayoría de los desarrolladores de React. Hay algunas diferencias esenciales que se refieren a la configuración de clases.

En HTML, probablemente esté acostumbrado a configurar clases usando el atributo clase. Dado que los componentes de React se pueden definir como una instancia de una clase, Class es una palabra reservada. Por lo tanto, los desarrolladores deben usar el atributo className en su lugar.

En JSX, los atributos className deben establecerse como cadenas. Una definición simple con varias clases se vería así:

<h1 className="classOne classTwo">Hi! Try edit me</h1>

Alternativamente, el atributo className se puede establecer igual a una expresión de JavaScript que devuelve una cadena. Para asegurarse de que las expresiones se interpreten correctamente como código JavaScript, debe colocarlas entre llaves. Echemos un vistazo a un ejemplo:

const color = "white"
<h1 className={"classOne " + color }>Hi! Try edit me</h1>;

En este ejemplo, agregamos una cadena regular y un valor de cadena contenido dentro de una variable. Una vez que se evalúa la expresión, nuestro atributo className será igual a la cadena 'classOne white'.

Podemos hacer que la expresión sea más legible reemplazando el operador + con un método .concat(), que combina dos cadenas en una.

const color="white"    
h1 className={"classOne ".concat(color)}>Hi! Try edit me</h1>

React método .join()

Este método estándar de JavaScript es útil para transformar un array de valores de cadena en múltiples valores de className. Dado que es un método de JavaScript, necesitamos colocar una expresión completa entre llaves en JSX.

De forma predeterminada, los valores de cadena combinados estarán separados por una coma. Sin embargo, para producir una lista válida de valores de className, necesitamos separarlos por un solo espacio. Afortunadamente, podemos especificar el separador pasando una cadena de espacio simple ' ' como argumento del método. He aquí un ejemplo:

class App extends Component {
  render() {
    const arr = ["bold", "primary", "lead"]
    return (<div><p className={arr.join(" ")}>Hi! Try edit me</p></div>)
  }
}

En nuestro archivo styles.css en playcode, definimos las tres clases:

.lead {
  font-size: 40px;
}
.bold {
  font-weight: bold;
}
.primary {
  color: white
}

Una vez que se ejecuta el código dentro de las llaves, puede ver que se aplican las tres clases.

También puede buscar en el código fuente para verificar que las clases se apliquen al elemento <p>.

<div id="app">
    <div class="container black">
        <p class="bold primary lead">Hi! Try edit me</p>
    </div>
</div>

Función personalizada en React

En ES6, podemos usar la sintaxis de desestructuración de matrices para crear una elegante función personalizada que devuelve una cadena formateada que podemos usar como un valor de className.

Veamos el código:

class App extends Component {
  render() {
    const classNameGenerator = (...classes)=>{
      return classes.join(" ")
    }
    return (<div className={classNameGenerator("container")}></div>)
  }
}

Esta función trata sus argumentos como elementos de matriz y luego usa el método .join() para devolver una lista formateada de valores className.

Al usar la función, puede pasar tantos valores de cadena como desee.

Condicional className en React

La aplicación de los valores de className condicionalmente puede ser útil para cambiar la apariencia de un elemento según la entrada del usuario. Por ejemplo, si su aplicación tiene temas oscuros y claros, su fondo también debería alternar de tonos claros a más oscuros. Aquí hay un ejemplo de código:

const lightBackground = !this.state.darkTheme ? "white" : "black"
<div className={classNameGenerator("container") + " " + lightBackground }></div>

A la variable lightBackground se le asigna una de las dos cadenas en función del valor de la propiedad de estado darkTheme. Además de llamar a la función classNameGenerator(""), también usamos el operador + para incluir el valor condicional de la variable también.

Para una mejor demostración, nuestra aplicación de código de reproducción incluye un botón para alternar el valor booleano de la propiedad darkTheme.