Cómo proporcionar className dinámico a un elemento en el método de renderizado de React Class

Solución:

Parece que encontré la respuesta a mi pregunta. Simplemente podemos hacer algo como esto:

var Alert = ReactClass({
  render: function() {
    return <div className={"alert " + this.props.type}>{this.props.message}</div>
  }
});

Simplemente coloque sus clases dentro de los evaluadores de plantillas { } en este caso. Crea tu cadena de clase basada en tus apoyos y estados.

Espero que esto sea útil para otros.

Una forma de lograr esto es tener una cadena que contendrá todas sus clases y luego establecerla en el componente className:

var Alert = ReactClass({

  var yourClassName="alert ";

  // Add any additional class names
  yourClassName += this.props.type + ' ';

  render: function() {
    return <div className={yourClassName}>{this.props.message}</div>
  }
});

o, alternativamente, puede almacenar los nombres de su clase en una matriz y convertirla en una cadena amigable para la clase cuando esté listo para usarla:

var Alert = ReactClass({

  var yourClassArray = [];

  // Add any additional class names
  yourClassArray.push('alert');
  yourClassArray.push(this.props.type);

  var classString = yourClassArray.join(' ');

  render: function() {
    return <div className={classString}>{this.props.message}</div>
  }
});

Eche un vistazo al paquete classnames. Puedes hacer cosas como esta:

className={classNames('alert', `alert-${type}`)}

o

className={classNames({
    'alert': true,
    'alert-success': success,
    'alert-error': error
})

---

---

Utiliza Nuestro Buscador