¿Cómo alternar la clase CSS en un elemento dinámicamente usando ReactJS?

En este artículo, aprenderemos a alternar la clase CSS en un elemento de forma dinámica en React.js. A veces, los desarrolladores necesitan dar un estilo CSS diferente al elemento mientras los usuarios toman alguna acción particular para hacer que la interfaz de usuario sea más atractiva. Por ejemplo, cuando el usuario hace clic en un elemento, podemos cambiar el estilo de cualquier elemento en particular alternando la clase CSS.

Requisitos previos: Los requisitos previos para este proyecto son:

• reaccionar conocimiento

Creación de la aplicación: el siguiente comando lo ayudará a iniciar una nueva aplicación de reacción .

npx create-react-app testapp

A continuación, debe pasar a la carpeta del proyecto testapp desde la terminal.

cd testapp

Directorio del proyecto: Debería verse así.

 

Enfoque 1: en este enfoque, implementaremos el código para alternar entre la clase única. Cuando un usuario hace clic en el botón, agregará y eliminará una clase activa de los elementos < h1> .

Ejemplo: Anote los siguientes códigos en los archivos respectivos.

• App.js: en este archivo, hemos implementado un código básico para alternar entre clases individuales.

import React, { Component } from 'react';
import './App.css';
  
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isClassActive: false,
        };
    }
  
    // Function to toggle class
    toggleClass = () => {
        this.setState({ isClassActive: 
            !this.state.isClassActive });
    }
    render() {
        return (
            <div className='mainDiv'>
  
                {/* If isClassActive is true it will 
                    add active class to h1 otherwise it 
                    will remove active class */}
                <h1 className={this.state.isClassActive ? 
                'active' : ''}>
                    GeeksforGeeks
                </h1>
                <button className='button' 
                    onClick={this.toggleClass}>
                        Click to toggle class
                </button>
  
            </div>
        );
    }
}
  
export default App;

• App.css: En este archivo hemos implementado diferentes clases.

.mainDiv {
    margin: 20px auto;
    text-align: center;
}
  
.active {
    font-size: 40px;
    color: green;
}
  
.button {
    padding: 7px 10px;
    background-color: lightblue;
    color: red;
    border-radius: 2px;
}

Pasos para ejecutar: para iniciar la aplicación de reacción, ejecute el siguiente comando en su terminal y verifique que la aplicación de reacción funcione correctamente.

npm start

Producción:

 

Enfoque 2: en este enfoque, implementaremos un cambio entre múltiples clases. Tenemos numerosos botones, y cuando el usuario hace clic en cualquier botón, configuramos la clase de acuerdo con el botón en el que se hizo clic en el elemento.

Ejemplo: Anote los siguientes códigos en los archivos respectivos.

• App.js: en este archivo, hemos implementado un código básico para alternar entre clases individuales.

import React, { Component } from 'react';
import './App.css';
  
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentClass: 'black',
        };
    }
  
    // function to change class according to button click
    makeGreen = () => {
        this.setState({ currentClass: 'green' });
    }
    makeRed = () => {
        this.setState({ currentClass: 'red' });
    }
    makeYellow = () => {
        this.setState({ currentClass: 'yellow' });
    }
    makeBlue = () => {
        this.setState({ currentClass: 'blue' });
    }
    render() {
        return (
            <div className='mainDiv'>
  
                {/* class of element will be changed 
                    according to the button click */}
                <h1 className={this.state.currentClass}>
                    GeeksforGeeks
                </h1>
                <button className='button' 
                onClick={this.makeGreen}>
                    Make Green
                </button>
                <button className='button' 
                onClick={this.makeRed}>
                    Make Red
                </button>
                <button className='button' 
                onClick={this.makeYellow}>
                    Make Yellow
                </button>
                <button className='button' 
                onClick={this.makeBlue}>
                    Make Blue
                </button>
  
            </div>
        );
    }
}
  
export default App;

• App.css: En este archivo hemos implementado diferentes clases.

.mainDiv {
    margin: 20px auto;
    text-align: center;
}
  
.black {
    font-size: 20px;
    color: black;
}
  
.green {
    font-size: 40px;
    color: green;
}
  
.red {
    font-size: 60px;
    color: red;
}
  
.yellow {
    font-size: 30px;
    color: yellow;
}
  
.blue {
    font-size: 50px;
    color: blue;
}
  
.button {
    padding: 7px 10px;
    background-color: lightblue;
    color: red;
    border-radius: 2px;
    margin: 2px;
}

Pasos para ejecutar: para iniciar la aplicación de reacción, ejecute el siguiente comando en su terminal y verifique que la aplicación de reacción funcione correctamente.

npm start

Producción: