Reagisci Js applicando condizionalmente gli attributi di classe

Voglio mostrare e nascondere in modo condizionale questo gruppo di pulsanti a seconda di cosa viene passato dal componente genitore 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>
    );
  }
});

Non succede nulla, tuttavia, con {this.props.showBulkActions? 'show': 'hidden'}. Sto facendo qualcosa di sbagliato qui?

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

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

Nota lo spazio dopo "pull-right". Non si desidera fornire accidentalmente la classe "pull-rightshow" anziché "pull-right show". Anche le parentesi devono essere lì.

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

Nel tuo caso, la soluzione sarà simile a:

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

...

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

Come nota a margine, ti suggerirei di provare a evitare di usare sia le classi showche le hiddenclassi, quindi il codice potrebbe essere più semplice. Molto probabilmente non è necessario impostare una classe affinché qualcosa venga mostrato per impostazione predefinita.

Se si utilizza un transpiler (come Babel o Traceur) è possibile utilizzare le nuove " stringhe di modelli " ES6 .

Ecco la risposta di @ spitfire109, modificata di conseguenza:

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

Questo approccio ti consente di fare cose ordinate come questa, renderizzando s-is-showno s-is-hidden:

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

Puoi usare qui i letterali String

const Angle = ({show}) => {

   const angle = `fa ${show ? 'fa-angle-down' : 'fa-angle-right'}`;

   return <i className={angle} />
}

Spendendo la bella risposta di @ spitfire109, si potrebbe fare qualcosa del genere:

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

  return names.join(' ');
}

e quindi all'interno della funzione di rendering:

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

mantiene il jsx corto

Oppure utilizzare NPM classnames . È molto semplice e utile soprattutto per costruire l'elenco delle classi

Nel caso in cui sia necessario un solo nome di classe opzionale:

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

È possibile utilizzare gli array ES6 anziché i nomi di classe. La risposta si basa sull'articolo del Dr. Axel Rauschmayer: Aggiunta condizionale di voci all'interno di array e letterali di oggetti .

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

2019:

React è un sacco di utility. Ma non è necessario alcun npmpacchetto per questo. basta creare da qualche parte la funzione classnamese chiamarla quando serve;

function classnames(obj){
  return Object.entries(obj).filter( e => e[1] ).map( e=>e[0] ).join(' ');
}

o

function classnames(obj){
 return Object.entries(obj).map( ([k,v]) => v?k:'' ).join(' ');
}

esempio

  stateClass= {
    foo:true,
    bar:false,
    pony:2
  }
  classnames(stateClass) // return 'foo pony'

 <div className="foo bar {classnames(stateClass)}"> some content </div>

Solo per ispirazione

dichiara l'elemento helper e lo usa come togglemetodo

(DOMToken​List)classList.toggle(class,condition)

esempio:

const classes = document.createElement('span').classList; 

function classstate(obj){
  for( let n in obj) classes.toggle(n,obj[n]);
 return classes; 
}

Soluzione più elegante, che è meglio per manutenzione e leggibilità:

const classNames = ['js-btn-connect'];

if (isSelected) { classNames.push('is-selected'); }

<Element className={classNames.join(' ')}/>

puoi usare questo:

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

Questo funzionerebbe per te

var TopicNav = React.createClass({
render: function() {

let _myClasses = `btn-group pull-right {this.props.showBulkActions?'show':'hidden'}`;

return (
            ...
            <div className={_myClasses}>
               ...
            </div>
    );
  }
});

Puoi usare questo pacchetto npm. 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"

In base al valore di this.props.showBulkActionste puoi cambiare classe in modo dinamico come segue.

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

Vorrei aggiungere che puoi anche usare un contenuto variabile come parte della classe

<img src={src} alt="Avatar" className={"img-" + messages[key].sender} />

Il contesto è una chat tra un bot e un utente e gli stili cambiano a seconda del mittente, questo è il risultato del browser:

<img src="http://imageurl" alt="Avatar" class="img-bot">

Questo è utile quando hai più di una classe da aggiungere. È possibile unire tutte le classi nella matrice con uno spazio.

const visibility = this.props.showBulkActions ? "show" : ""
<div className={["btn-group pull-right", visibility].join(' ')}>

Sostituire:

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

con:

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

Riferimento alla risposta al fuoco @split, possiamo aggiornarlo con i template letterali, che è più leggibile, per riferimento Checkout template javascript letterale

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

Ho trovato questo che spiega come farlo con un ternario e con la libreria Classnames