Reagiere Js unter bedingter Anwendung von Klassenattributen

Ich möchte diese Schaltflächengruppe bedingt ein- und ausblenden, je nachdem, was von der übergeordneten Komponente übergeben wird, die folgendermaßen aussieht:

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

Mit den {this.props.showBulkActions? 'Verborgenes zeigen'}. Mache ich hier etwas falsch?

Die geschweiften Klammern befinden sich innerhalb der Zeichenfolge, daher wird sie als Zeichenfolge ausgewertet. Sie müssen draußen sein, also sollte dies funktionieren:

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

Beachten Sie das Leerzeichen nach "Nach rechts ziehen". Sie möchten nicht versehentlich die Klasse "pull-rightshow" anstelle von "pull-right show" bereitstellen. Auch die Klammern müssen vorhanden sein.

Wie andere kommentiert haben, ist das Dienstprogramm classnames der derzeit empfohlene Ansatz, um bedingte CSS-Klassennamen in ReactJs zu verarbeiten.

In Ihrem Fall sieht die Lösung folgendermaßen aus:

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

...

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

Als Randnotiz würde ich Ihnen empfehlen, die Verwendung von beiden showund hiddenKlassen zu vermeiden , damit der Code einfacher ist. Höchstwahrscheinlich müssen Sie keine Klasse festlegen, damit etwas standardmäßig angezeigt wird.

Wenn Sie einen Transpiler (wie Babel oder Traceur) verwenden, können Sie die neuen ES6 " Template Strings " verwenden.

Hier ist die Antwort von @ spitfire109, entsprechend geändert:

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

Mit diesem Ansatz können Sie solche netten Dinge tun, indem Sie entweder s-is-shownoder Folgendes rendern s-is-hidden:

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

Sie können hier String-Literale verwenden

const Angle = ({show}) => {

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

   return <i className={angle} />
}

Wenn man sich die gute Antwort von @ spitfire109 ansieht, könnte man so etwas tun:

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

  return names.join(' ');
}

und dann innerhalb der Renderfunktion:

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

hält das jsx kurz

Oder verwenden Sie npm- Klassennamen . Es ist sehr einfach und nützlich, insbesondere zum Erstellen der Klassenliste

Falls Sie nur einen optionalen Klassennamen benötigen:

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

Sie können ES6-Arrays anstelle von Klassennamen verwenden. Die Antwort basiert auf dem Artikel von Dr. Axel Rauschmayer: Bedingtes Hinzufügen von Einträgen in Array- und Objektliteralen .

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

2019:

Reagieren ist See viele Dienstprogramme. Dafür brauchen Sie aber kein npmPaket. Erstellen Sie einfach irgendwo die Funktion classnamesund rufen Sie sie bei Bedarf auf.

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

oder

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

Beispiel

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

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

Nur zur Inspiration

Deklarieren Sie das Hilfselement und verwenden Sie es als toggleMethode

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

Beispiel:

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

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

Elegantere Lösung, die für Wartung und Lesbarkeit besser ist:

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

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

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

Sie können dies verwenden:

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

Das würde für dich funktionieren

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

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

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

Sie können dieses npm-Paket verwenden. Es behandelt alles und verfügt über Optionen für statische und dynamische Klassen, die auf einer Variablen oder einer Funktion basieren.

// 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"

Basierend auf dem Wert von können this.props.showBulkActionsSie Klassen wie folgt dynamisch wechseln.

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

Ich möchte hinzufügen, dass Sie auch einen variablen Inhalt als Teil der Klasse verwenden können

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

Der Kontext ist ein Chat zwischen einem Bot und einem Benutzer, und die Stile ändern sich je nach Absender. Dies ist das Ergebnis des Browsers:

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

Dies ist nützlich, wenn Sie mehr als eine Klasse anhängen müssen. Sie können alle Klassen in einem Array mit einem Leerzeichen verbinden.

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

Ersetzen:

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

mit:

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

Verweis auf @split fire answer, wir können es mit Vorlagenliteralen aktualisieren, die besser lesbar sind. Als Referenz Checkout Javascript-Vorlagenliteral

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

Ich fand dies , das erklärt, wie man es mit einem ternären und mit Classnames Library macht