ReactJS agrega clase dinámica a nombres de clase manuales

158

Necesito agregar una clase dinámica a una lista de clases regulares, pero no tengo idea de cómo (estoy usando babel), algo como esto:

<div className="wrapper searchDiv {this.state.something}">
...
</div>

¿Algunas ideas?

css reactjs Humanidad1023
fuente
Respuestas útiles para las mejores prácticas de estilo reactjs en link
Rahil Ahmad

Respuestas:

241

Puedes hacer esto, JavaScript normal:

className={'wrapper searchDiv ' + this.state.something}

o la versión de la plantilla de cadena, con backticks:

className={`wrapper searchDiv ${this.state.something}`}

Por supuesto, ambos tipos son solo JavaScript, pero el primer patrón es el tradicional.

De todos modos, en JSX, cualquier cosa entre corchetes se ejecuta como JavaScript, por lo que básicamente puede hacer lo que quiera allí. Pero la combinación de cadenas JSX y llaves no es una opción para los atributos.

dannyjolie
fuente
¿Y qué en caso de múltiples clases?
Pardeep Jain
55
En el caso de múltiples clases dinámicas, todas las clases dinámicas deben provenir del estado, es decir, no es posible utilizarlas element.classList.add("my-class"); por lo tanto permitiendo:className={`wrapper searchDiv ${this.state.something ? "my-class " : ""} ${this.state.somethingElse ? "my-other-class " : ""}`}
Kevin Farrugia
className={'wrapper searchDiv} + this.state.isTrue ? 'my-class' : ' 'Esto no funciona ¿Alguien puede decir por qué?
kryptokinght
54

Dependiendo de cuántas clases dinámicas necesite agregar a medida que su proyecto crezca, probablemente valga la pena consultar la utilidad de nombres de clase de JedWatson en GitHub. Le permite representar sus clases condicionales como un objeto y devuelve las que evalúan como verdaderas.

Entonces, como ejemplo de su documentación React:

render () {

var btnClass = classNames({
  'btn': true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

return <button className={btnClass}>I'm a button!</button>;

}

Dado que React activa una nueva representación cuando hay un cambio de estado, los nombres de clase dinámicos se manejan de forma natural y se mantienen actualizados con el estado de su componente.

Brad Colthurst
fuente
55
El uso de classNames para una cosa tan simple es una exageración. Evite usarlo y opte por la respuesta simple de dannyjolie
lista de verificación del
2
¿Estás seguro de que es algo simple? Casi siempre desea tener un control total de grano fino sobre qué clases se aplican a los elementos.
Dragas
55
@checklist Yo diría lo contrario, el paquete de nombres de clase es 1.1kB antes de Gzipping (y medio kB después de Gzipping), no tiene dependencias y proporciona una API mucho más limpia para la manipulación de nombres de clase. No hay necesidad de optimizar prematuramente algo tan pequeño, cuando la API es mucho más expresiva. Cuando utilice la manipulación de cadenas estándar, debe recordar tener en cuenta el espaciado, ya sea antes de cada nombre de clase condicional o después de cada nombre de clase estándar.
tomhughes
classNames es genial, descubrí que leer, agregar y arreglar accesorios eran más fáciles que la manipulación manual a medida que el componente crecía en complejidad.
MiFiHiBye
37

Una sintaxis simple posible será:

<div className={`wrapper searchDiv ${this.state.something}`}>
oligopol
fuente
25

Aquí está la mejor opción para Dynamic ClassName, solo haga una concatenación como lo hacemos en Javascript.

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }
Saad Mirza
fuente
Esta es la mejor solución sin problemas de linting. Trabajado como un encanto. Gracias.
Royal.O
3

Si necesita nombres de estilo que deberían aparecer de acuerdo con la condición de estado, prefiero usar esta construcción:

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>
Sergey Gubarev
fuente
2

intente esto usando ganchos: 

        const [dynamicClasses, setDynamicClasses] = React.useState([
    "dynamicClass1", "dynamicClass2
]);

y agregue esto en el atributo className: 

<div className=`wrapper searchDiv ${[...dynamicClasses]}`>
...
</div>

para agregar clase:

    const addClass = newClass => {
       setDynamicClasses([...dynamicClasses, newClass])
    }

para eliminar la clase: 

        const deleteClass= classToDelete => {

           setDynamicClasses(dynamicClasses.filter(class = > {
             class !== classToDelete
           }));

        }
Hamza Khattabi
fuente
1

Puede usar este paquete npm. Maneja todo y tiene opciones para clases estáticas y dinámicas basadas en una variable o una función.

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />
Tushar Sharma
fuente
1 
getBadgeClasses() {
    let classes = "badge m-2 ";
    classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
    return classes;
}

<span className={this.getBadgeClasses()}>Total Count</span>
Harshvardhan Singh Baghel
fuente
-1 
className={css(styles.mainDiv, 'subContainer')}

Esta solución se ha probado en React SPFx.

También agregue la declaración de importación:

import { css } from 'office-ui-fabric-react/lib/Utilities';
Harjot Singh
fuente