Existen los siguientes enfoques para agregar o eliminar múltiples clases a un componente ReactJS:
Enfoque 1: podemos usar el método classNames (una sencilla utilidad de JavaScript para unir condicionalmente classNames). La función classNames toma cualquier cantidad de argumentos que pueden ser una string o un objeto.
El argumento ‘fila’ es la abreviatura de {fila: verdadero}. Si el valor asociado con una clave determinada es falso, esa clave no se incluirá en la salida. La fila y la columna son los nombres de las clases en el siguiente ejemplo.
classNames('row', 'col'); // => 'row col'
classNames('row', { col: true }); // => 'row col'
classNames({ 'row-col': true }); // => 'row-col'
classNames({ 'row-col': false }); // => ''
classNames({ row: true }, { col: true }); // => 'row col'
classNames({ row: true, col: true }); // => 'row col'
Instalación del módulo:
Tenemos que instalar la dependencia para usar la función classNames, y usaremos clases de arranque.
# via npm npm install classnames # via Bower bower install classnames # via Yarn yarn add classnames
Nombre de archivo: App.js
Javascript
import React, { Component } from "react";
// Importing classNames
import classNames from 'classnames'
class GFG extends Component {
state = {
flag : true
}
handleUpdate = () => {
this.setState({flag: !this.state.flag})
}
render() {
// Using classNames to add and remove
// Classes based on state
var classes = classNames( {
'btn': true,
'btn-primary': this.state.flag === true,
'btn-success':this.state.flag===false
})
return (
<div>
<button type="button"
className= { classes}
onClick = {this.handleUpdate}>
Click to add and remove classes
</button>
</div>
);
}
}
export default GFG;
Ruta del archivo: public/index.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>
Ruta del archivo: src/Component/App.js
Javascript
import React from 'react'
import GFG from './GFG'
const App = () => {
return <div>
<GFG />
</div>
}
export default App;
Ruta del archivo: src/index.js
Javascript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './components/App'
ReactDOM.render(<App/> , document.querySelector('#root'))
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Enfoque 2: podemos usar los literales de la plantilla ES6.
Nombre de archivo: App.js
Javascript
import React, { Component } from "react";
import './App.css'
class App extends Component {
state = {
flag: true
}
handleUpdate = () => {
this.setState({ flag: !this.state.flag })
}
render() {
return (
<div className="appContainer" >
<button type="button"
// Using es6 backticks syntax(template literal)
className={`btn ${this.state.flag ? 'box1' : 'box2'}`}
onClick={this.handleUpdate}>
Click to add and remove classes
</button>
</div>
);
}
}
export default App;
Nombre de archivo: App.css
css
.appContainer{
margin-left: 40%;
margin-top: 50px;
}
.box1{
background-color: green;
padding: 10px;
}
.box2{
background-color: yellow;
padding: 10px;
}
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Producción:
- Antes de hacer clic en el botón
-
Ahora, después de hacer clic en el botón, el siguiente será el resultado:
Después de hacer clic en el botón
Publicación traducida automáticamente
Artículo escrito por KapilChhipa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA