it-swarm.com.de

Reagiert Js, die Klassenattribute bedingt anwenden

Ich möchte diese Schaltflächengruppe bedingt anzeigen und ausblenden, je nachdem, was von der übergeordneten Komponente übergeben wird, die wie folgt 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>
    );
  }
});

Nichts passiert jedoch mit den {this.props.showBulkActions? 'Verborgenes zeigen'}. Mache ich hier etwas falsch?

205
apexdodge

Die geschweiften Klammern befinden sich innerhalb der Zeichenfolge und werden daher 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 "Pull-Right". Sie möchten nicht versehentlich die Klasse "Pull-Rightshow" statt "Pull-Right-Show" bereitstellen. Auch die Klammern müssen dabei sein.

395
spitfire109

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

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 Randbemerkung empfehle ich Ihnen, die Verwendung der Klassen show und hidden zu vermeiden, sodass der Code einfacher sein könnte. Wahrscheinlich müssen Sie keine Klasse festlegen, damit standardmäßig etwas angezeigt wird.

62
Diego V

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 modifiziert:

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

Dieser Ansatz ermöglicht es Ihnen, solche Dinge zu tun, indem Sie entweder s-is-shown oder s-is-hidden rendern:

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

Sie können hier String-Literale verwenden

const Angle = ({show}) => {

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

   return <i className={angle} />
}
7
Musa

Oder benutze npm classnames . Es ist sehr einfach und nützlich, insbesondere zum Erstellen der Klassenliste

6
Pencilcheck

Wenn man die Antwort von @ spitfire109 ausgibt, 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 die jsx kurz

6
flaky

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

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

Falls Sie nur einen optionalen Klassennamen benötigen:

<div className={"btn-group pull-right " + (this.props.showBulkActions && 'show')}>
2
chibis0v

sie können dies verwenden:

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

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(' ')}/>
1
Nate Ben

Das würde für Sie funktionieren

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

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

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

0
Mano

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 Browser-Ergebnis:

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

Sie können das Paket " this npm" verwenden. Es behandelt alles und bietet Optionen für statische und dynamische Klassen, die auf einer Variablen oder 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"
0
Tushar Sharma

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

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

2019:

React See ist eine Menge von Dienstprogrammen. Dafür benötigen Sie kein npm-Paket. Erstellen Sie einfach irgendwo die Funktion classnames und rufen Sie sie bei Bedarf auf.

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

beispiel

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