Reagire attributi Js classe condizionalmente applicando

Question

voglio mostrare condizionale e nascondere questo gruppo di pulsanti a seconda di ciò che viene passato dalla componente principale che assomiglia a questo:

<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> 
    ); 
    } 
}); 

Nulla sta accadendo però, con i {this.props.showBulkActions? 'mostra': 'nascosto'}. Sto facendo qualcosa di sbagliato qui?

Answer 1

Le parentesi graffe sono all'interno della stringa, pertanto viene valutata come stringa. Devono essere all'esterno, quindi dovrebbe funzionare:

<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}> 

Annotare lo spazio dopo "tirare a destra". Non si vuole fornire accidentalmente la classe "pull-rightshow" invece di "pull-right show". Anche le parentesi devono essere lì.

Answer 2

Come altri hanno commentato, l'utilità classnames è l'approccio attualmente raccomandato per gestire i nomi di classi CSS condizionali in ReactJs.

Nel tuo caso, la soluzione sarà simile:

var btnGroupClasses = classNames(
    'btn-group', 
    'pull-right', 
    { 
    'show': this.props.showBulkActions, 
    'hidden': !this.props.showBulkActions 
    } 
); 

...

<div className={btnGroupClasses}>...</div> 

Come nota a margine, vorrei suggerire di cercare di evitare l'uso di entrambe le show e hidden classi , quindi il codice potrebbe essere più semplice. Molto probabilmente non è necessario impostare una classe affinché qualcosa venga mostrato per impostazione predefinita.

Answer 3

Spendendo sulla risposta multa @ di spitfire109, si potrebbe fare qualcosa di simile:

rootClassNames() { 
    let names = ['my-default-class']; 
    if (this.props.disabled) names.push('text-muted', 'other-class'); 

    return names.join(' '); 
} 

e poi all'interno della funzione di rendering:

<div className={this.rootClassNames()}></div> 

mantiene il JSX breve

Answer 4

Se sei utilizzando un transpiler (come ad esempio Babel o Traceur) è possibile utilizzare il nuovo ES6 "template strings".

Ecco la risposta di @ spitfire109, modificati di conseguenza:

<div className={`btn-group pull-right ${this.props.showBulkActions ? 'shown' : 'hidden'}`}> 

Questo approccio permette di fare altre belle cose come quella, il rendering sia s-is-shown o s-is-hidden:

<div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}> 

Answer 5

Oppure utilizzare NPM classnames .E 'molto facile e utile soprattutto per la costruzione della lista delle classi

Answer 6

È possibile utilizzare se concetto come questo

var Count=React.createClass({ 
getInitialState: function() 
{ 
var state={counter:1}; 

setInterval(function(){ 
this.setState(
{counter:this.state.counter+(this.state.counter==1000?9999999999:1)}) 
}.bind(this),1); 
return state; 
}, 

render:function(){ 
return(
<div> 
Counter<br/> 
{this.state.counter} 
</div> 
) 
} 
} 
) 

Answer 7

La soluzione migliore che ho trovato, per esempio accodare is-open classe:

const isOpenClass = this.state.isOpen ? ' is-open' : '', 
     className = `gig-card-base add-new-gig add-pro-gig-card${isOpenClass}`; 

<span className={className}>Something cool</span> 

Answer 8

È possibile utilizzare gli array ES6 anziché i nomi di classe. La risposta è basata sull'articolo del Dr. Axel Rauschmayer: Conditionally adding entries inside Array and object literals.

<div className={[ 
       "classAlwaysPresent", 
       ...Array.from(condition && ["classIfTrue"]) 
       ].join(" ")} /> 

Answer 9

È possibile utilizzare il pacchetto npm this. Gestisce tutto e ha opzioni per classi statiche e dinamiche basate su una variabile o una funzione.

// Support for string arguments 
getClassNames('class1', 'class2'); 

// support for Object 
getClassNames({class1: true, class2 : false}); 

// support for all type of data 
getClassNames('class1', 'class2', null, undefined, 3, ['class3', 'class4'], { 
    class5 : function() { return false; }, 
    class6 : function() { return true; } 
}); 

<div className={getClassNames('show', {class1: true, class2 : false})} /> // "show class1"