Reactでクラスを追加/削除する適切な方法

Question

私はリアクションの初心者で、質問があります！

私はReactのHTMLにクラスを追加/削除するための最良の方法について明確な答えを見つけることができなかったので、これを投稿しています。私は最初のReactアプリケーションを作成し、特定のアクションが発生したときにクラスを追加/削除することで、自分のアプリの要素の一部をアニメーション化したいところまで来ました。

私は状態を経てアニメーション化する要素のクラスに合格している：ここで

は、私がやっていることです。状態がそうのように初期値を与えられるので

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

：

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

は次に私が状態を受信し、これ等カートクラスを実装する子コンポーネントの状態をダウン渡し

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

基本的にそれはnewTotalCleanと呼ばれる私の変数のいずれかを評価し、それが同じ0をしない場合、それはオード」にcartClassesの状態を更新：文があれば、私の関数は、私は次のことを持っていますr-wrap cart-out "を追加し、CSSアニメーション効果を含む余分なクラスを追加します。

通常、私はjQuery Add/removeClass（）を使用しますが、私はそれを使用することから自分自身を制限しようとしていますし、もっと反応的な方法で行います。

ありがとうございました！

Answer 1

ReactCSSTransitionGroupを使用することをおすすめします。代わりにclassNameを設定するには、次のような遷移名を設定します。

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

が反応中のアニメーションについての詳細を学ぶためにthis pageを参照してください。

Answer 2

これは私が通常行うことです。クラス名を保持する変数を作成し、この変数をjsx内に配置します。線に沿って何か：

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

この情報がお役に立てば幸いです:)

Answer 3

複数のクラス名を結合するために使用することができますクラス名と呼ばれるJavaScriptのユーティリティがあります。

これはgithubページlinkです。 これはより明確になり、わかりやすくわかりました。 は、例えば、あなたのコードは、上記

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

のように書くことができ、デフォルトでは、順序ラップが割り当てられたというクラスがあるでしょうし、条件が満たされた場合にのみ、他のクラスが割り当てられていることを述べています。