Saltar al contenido

Aplicando las clases condicionalmente en reacción

Hay un par de enfoques, dependiendo de sus preferencias y necesidades. El más rápido es con un ternario y otro enfoque es usar una biblioteca. He usado ambos enfoques, dependiendo del proyecto.

Abajo está nuestro ejemplo de banner. Tiene una clase de bandera, pero queremos añadir la clase activa cuando el accesorio activo es verdadero.

Aplicando las clases condicionalmente en reacción
Aplicando las clases condicionalmente en reacción
12345importReactfrom "react";constBanner=({ niños })=[;div className="banner";{children}</div>;exportdefaultBanner;

javascript

Con un ternario

El enfoque más simple es usar una declaración ternaria dentro de una plantilla literal.

1234567importReactfrom "react";constBanner=({activo, niños })=[;div className={`banner ${activo ? "active":""}``;{children}</div>);exportdefaultBanner;

javascript

En este ejemplo, la bandera siempre está en el div, pero la activa depende de la hélice activa.

Si tienes un montón de nombres de clase que necesitan ser condicionados por el mismo elemento, puede ser un poco desordenado, pero aún así funciona.

12345678910111213importReactfrom "react";constBanner=({activo, niños })=[;(<div className={`banner grande ${activo ? "activo":""}${ discapacitado ? "discapacitado":""}};{niños}</div>);exportdefaultBanner;

javascript

En este ejemplo, el banner y el grande siempre están en el div, pero el activo depende del atrezzo activo, y el desactivado depende del atrezzo desactivado.

Con la Biblioteca de Nombres de Clases

Si te encuentras haciendo esto a menudo, o si utilizas varias clases condicionalmente en el mismo elemento, podrías encontrar útil utilizar una simple biblioteca de JavaScript para aplicar condicionalmente los nombres de las clases juntas. La biblioteca se llama Classnames y es una biblioteca JavaScript simple, por lo que funciona muy bien con React y también con otros marcos JavaScript.

Para usarlo, sólo tienes que instalarlo con hilo añadir nombres de clase o npm instalar nombres de clase. Luego puedes importarlo y usarlo en tu componente de esta manera:

1234567891011121314151617importReactfrom "react";import classNames from "classnames";constBanner=({ active, children, disabled })=>(<div className={classNames({ banner:true, large:true, active: active, disabled: disabled })};{children}</div>);exportdefaultBanner;

javascript

Si tienes clases que siempre quieres que se incluyan, puedes establecerlas como verdaderas, como en el ejemplo anterior, o puedes pasarlas como argumentos de cadena a ClassNames como este:

123456789101112131415importReactfrom "react";import classNames from "classnames";constBanner=({active, disabled })=>(<div className={classNames("banner", "large",{ active: active, disabled: disabled })};{children}</div>);exportdefaultBanner;

javascript

Además, si los nombres de clase te parecen demasiado largos, recuerda que puedes importarlos con el nombre que quieras. Un nombre que he visto usar bastante es cx. Así que puedes importarlo así:

1importar cx de$0027classnames$0027;

javascript