Aplicar dinámicamente valores className en React

1. Establecer valores dinámicos de className en React
2. Use JavaScript nativo para establecer valores dinámicos de className en React
3. Use cadenas literales (ES6) para establecer valores dinámicos de className en React

Los usuarios modernos establecen altas expectativas cuando se trata de la experiencia del cliente. Quieren funciones como el modo oscuro e interfaces intuitivas que respondan a sus acciones.

Los desarrolladores web deben encontrar una manera de actualizar dinámicamente las clases y los estilos según las acciones del usuario para implementar estas funciones.

El atributo className contendrá múltiples valores para aplicaciones y contenedores avanzados. Si desea establecer múltiples valores para un nombre de clase pero solo uno de los valores de nombre de clase es dinámico, puede hacerlo de varias maneras.

Establecer valores dinámicos de className en React

En React, usamos el atributo className para agregar clases a nuestros elementos. El atributo className contendrá múltiples valores al crear aplicaciones web complejas.

Cuando construimos aplicaciones React, usamos el lenguaje de plantillas JSX, que permite expresiones de JavaScript dentro de la instrucción return. Todo lo que tiene que hacer es envolver las expresiones de JavaScript con corchetes {}, y se evaluará todo lo que se encuentre entre estos corchetes.

Puede establecer múltiples valores para el atributo className. Algunos de ellos serán constantes, mientras que otros se aplicarán de forma dinámica.

Exploremos formas específicas de hacerlo en React.

Use JavaScript nativo para establecer valores dinámicos de className en React

La forma más sencilla de agregar valores dinámicos de nombre de clase es combinar llaves y establecer los atributos de nombre de clase iguales a las variables de estado. Esta es una característica bastante simple disponible en todas las versiones de JavaScript.

Ejemplo:

export default function App() {
    const [border, setBorder] = useState("blackBorder");
    return (
        <div className={"App " + border}>
            <h1>Hello CodeSandbox</h1>
            <input type="text" onChange={(e) => setBorder(e.target.value)}></input>
        </div>
    );
}

En este ejemplo, usamos el enlace useState() para establecer el valor predeterminado de la variable de estado border en blackBorder. En CSS, definimos las reglas de clase blackBorder, que aplicarán un borde negro de 2 píxeles a cualquier contenedor.

Dentro de la instrucción return, usamos la sintaxis de llaves {} para tener los dos valores className. La clase App será constante, mientras que el segundo valor className dependerá del valor de la variable de estado border.

Podemos implementar una entrada de texto para permitir que los usuarios escriban cualquier nombre de clase, y actualizará el valor del valor del borde. Mire la demostración usted mismo y escriba uno de los siguientes valores: greenBorder, blackBorder, redBorder y vea qué sucede.

Use cadenas literales (ES6) para establecer valores dinámicos de className en React

Alternativamente, puede usar acentos graves, también conocidos como literales de cadena, para definir valores dinámicos para el atributo className.

Ejemplo:

export default function App() {
    const [border, setBorder] = useState("blackBorder");
    return (
        <div className={`App ${border}`}>
            <h1>Hello CodeSandbox</h1>
            <input type="text" onChange={(e) => setBorder(e.target.value)}></input>
        </div>
    );
}

Esta sintaxis es mucho más legible. Preste atención al doble uso de llaves.

El par externo es necesario para que JSX entienda que hay una expresión de JavaScript entre llaves.

Cuando se usan acentos graves, el signo de dólar denota una referencia a una variable. Por ejemplo, si escribió ${someVariable}, JavaScript sabría buscar el valor actual de la variable.

Por lo demás, todo es igual que antes.