que - id css ejemplo

ReactJS agrega clase dinámica a nombres de clase manuales

Question

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?

Gracias

Answer 1

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"
      }

Answer 2

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 classnames 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, sus nombres de clase dinámica se manejan de forma natural y se mantienen actualizados con el estado de su componente.

Answer 3

Puedes hacer esto, javascript normal:

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

o la versión de la plantilla de cadena

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

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í. Sin embargo, la combinación de cadenas JSX y llaves no es una opción para los atributos.

Answer 4

Puedes usar this 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})} />

Answer 5

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" : "")''}>

Answer 6

Una sintaxis simple posible será:

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