richtigen Weg zum Hinzufügen/Entfernen von Klassen in React

Question

Ich bin ein React Neuling und habe eine Frage!

Ich poste dies, weil ich nicht in der Lage gewesen bin, eine klare Antwort zu finden, was die beste Methode zum Hinzufügen/Entfernen von Klassen zu HTML in React ist. Ich habe meine erste React-App erstellt und kam zu dem Punkt, an dem ich einige der Elemente meiner App animieren wollte, indem ich Klassen hinzufügte/entfernte, wenn eine bestimmte Aktion stattfand.

Hier ist, was ich getan habe:

Ich habe die Elemente Klasse übergeben, die ich durch einen Zustand animieren möchten. Der Zustand gegeben wird, einen Anfangswert in etwa so:

getInitialState: function() { 
    return { 
     cartClasses:"order-wrap" 
     } 
} 

Dann geht ich habe den Staat zu einer untergeordneten Komponente nach unten, die wie so dem Zustand und implementiert die Wagen Klassen erhalten:

<div className={this.props.cartClasses}> 

In einer meine Funktionen ich habe nach dem if-Anweisung:

newTotalClean != 0 ? this.setState({cartClasses:"order-wrap cart-out"}) : this.setState({cartClasses:"order-wrap"}); 

Im Grunde ist es eine meiner Variablen namens newTotalClean auswertet und wenn es ungleich 0 aktualisiert er den Zustand der cartClasses zu „orde r-wrap cart-out "und fügt somit eine zusätzliche Klasse hinzu, die CSS-Animationseffekte enthält.

Normalerweise würde ich jQuery Add/removeClass() verwenden, aber ich versuche, mich davon zu beschränken, das zu verwenden, und es reaktiver zu tun, nicht sicher, ob das Speichern von Klassen in einem Zustand die beste Methode ist oder nicht?

Danke für Ihre Hilfe!

Answer 1

Ich schlage vor, Sie verwenden ReactCSSTransitionGroup. Anstatt die className Einstellung, setzen Sie den Transitionsnamen wie folgt aus:

<ReactCSSTransitionGroup 
    transitionName="example" 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={300} 
> 
    ... some code here .. 
</ReactCSSTransitionGroup> 

this page Sehen Sie mehr über Animationen zu lernen, in React.

Answer 2

das ist, was ich normalerweise tue. Ich mache eine Variable, die die Klassennamen enthält und setze diese Variable in meine jsx. Etwas entlang der Linien von:

magic: function() { 
    var myClass = this.state.cartClasses; 

    if (condition) { 
    this.setState({ cartClasses: 'class1' }); 
    } else { 
    this.setState({ cartClasses: 'class2' }); 
    } 

    return (
    <div className={myClass}> 
     hello world 
    </div> 
); 
} 

this helps :)

Answer 3

Es ist ein Javascript-Dienstprogramm Klassennamen genannt, die verwendet werden können, mehrere Klassennamen zu verbinden.

Dies ist ein link zu ihrer github Seite Dies gibt mehr Klarheit und ich habe es intuitiver zu verstehen gefunden. Zum Beispiel könnten Sie den Code als

var cartClasses = classNames('order-wrap',{'cart-out': newTotalClean!=0}); 

oben sagt die geschrieben werden, dass standardmäßig wird es eine Klasse namens Order-Wrap zugewiesen und nur dann, wenn die Bedingung erfüllt ist, wird die andere Klasse zugeordnet.