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 sucede nada con {this.props.showBulkActions ? 'mostrar': 'oculto'}. ¿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 desea proporcionar accidentalmente la clase "pull-rightshow" en lugar de "pull-right show". También los paréntesis deben estar allí.
Como han comentado otros, la utilidad de nombres de clase es el enfoque actualmente recomendado para manejar nombres de clase 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 clases hidden y show , por lo que el código podría ser más simple. Lo más probable es que no necesite establecer una clase para que algo se muestre de forma predeterminada.
Apéndice 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 ordenadas como esa, representando s-is-shown o s-is-hidden :
<div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}>