Aplicar condicionalmente atributos de clase en React
Quiero mostrar y ocultar condicionalmente este grupo de botones dependiendo de lo que se pasa desde el componente principal, que se ve así:
<TopicNav showBulkActions={this.__hasMultipleSelected} />
__hasMultipleSelected: function() {
return false; //return true or false depending on data
}
var TopicNav = React.createClass({
render: function() {
return (
<div className="row">
<div className="col-lg-6">
<div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
<button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Bulk Actions <span className="caret"></span>
</button>
<ul className="dropdown-menu" role="menu">
<li><a href="#">Merge into New Session</a></li>
<li><a href="#">Add to Existing Session</a></li>
<li className="divider"></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</div>
</div>
);
}
});
Sin embargo, no pasa nada con el {this.props.showBulkActions ? 'show' : 'hidden'}. ¿Estoy haciendo algo mal aquí?
Las llaves están dentro de la cadena, por lo que se evalúa como una cadena. Necesitan estar afuera, así que esto debería funcionar:
<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
Tenga en cuenta el espacio después de "tirar a la derecha". No querrás proporcionar accidentalmente la clase "pull-rightshow" en lugar de "pull-right show". Además, los paréntesis deben estar ahí.
Como han comentado otros, la utilidad classnames es el enfoque recomendado actualmente para manejar nombres de clases CSS condicionales en ReactJs.
En su caso, la solución se verá así:
var btnGroupClasses = classNames(
'btn-group',
'pull-right',
{
'show': this.props.showBulkActions,
'hidden': !this.props.showBulkActions
}
);
...
<div className={btnGroupClasses}>...</div>
Como nota al margen, le sugiero que intente evitar el uso de ambas clases showy hidden, para que el código pueda ser más simple. Lo más probable es que no necesites configurar una clase para que algo se muestre de forma predeterminada.
Anexo de 2021: para mejorar el rendimiento, puede considerar clsx como alternativa.
Si está utilizando un transpilador (como Babel o Traceur), puede utilizar las nuevas " cadenas de plantilla " de ES6.
Aquí está la respuesta de @spitfire109, modificada en consecuencia:
<div className={`btn-group pull-right ${this.props.showBulkActions ? 'shown' : 'hidden'}`}>
Este enfoque le permite hacer cosas interesantes como esa, renderizando s-is-showno s-is-hidden:
<div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}>
