Ich habe eine Reaktionskomponente erstellt, die aus slideUp () und slideDown () besteht. Ich habe mit jQuery slideup und slidedown Methoden implementiert.

Ich muss diese Funktion mit Hilfe einer Reaktionsanimation implementieren.

Ich lese über ReactTransitionGroup und ReactCSSTransitionGroup. Die Art der Erklärung hat mich gelehrt, wir können diese Funktionalität tun, wenn DomNode an eine Komponente angehängt oder abgehängt (Korrigieren Sie mich, wenn ich falsch liege).

Meine Frage ist -> wie man slideup () und slidedown () auf reaktive Weise und ohne Verwendung von jQuery ausführt.

Siehe diese jsFiddle fürhttps: //jsfiddle.net/guc3yrm1

P.S -> Bitte erkläre mir, warum dieser Teil der Reaktionsanimation im Vergleich zu jQuery (ich bin ein jQuery-Typ) etwas schwierig zu sein scheint.

var Hello = React.createClass({
    getInitialState: function() {
        return {
            slide: false,
        }
    },
    slide: function() {
        if (this.state.slide) {
            $(this.refs.slide).slideDown();
            this.setState({
                slide: false
            });
        } else {
            $(this.refs.slide).slideUp();
            this.setState({
                slide: true
            });
        }
    },
    render: function() {
        return ( 
            <div>
                <input type = "button" value = "clickme" onClick = {this.slide}/> 
                <br />
                <br />
                <div className = "slide" ref="slide" >< /div>
            </div>
        );
    }
});

ReactDOM.render( < Hello name = "World" / > ,
    document.getElementById('container')
);