A naive way to get JQuery slide/fade animations in React.js

gistfile1.js

var JQuerySlide = React.createClass({
    componentWillEnter: function(callback){
        var $el = $(this.getDOMNode())
        $el.slideDown(function(){
            callback();
        });
    },
    componentWillLeave: function(callback){
        var $el = $(this.getDOMNode());
        $el.slideUp(function(){
            callback();
        });
    },
    render: function(){
        return this.transferPropsTo(this.props.component({style: {display: 'none'}}));
    }
});

var JQueryFade = React.createClass({
    componentWillEnter: function(callback){
        var $el = $(this.getDOMNode())
        $el.fadeIn(function(){
            callback();
        });
    },
    componentWillLeave: function(callback){
        var $el = $(this.getDOMNode());
        $el.fadeOut(function(){
            callback();
        });
    },
    render: function(){
        return this.transferPropsTo(this.props.component({style: {display: 'none'}}));
    }
});

// Call like this:
// return (<div> Whatever other stuff you want to put around it, if desired
//             <ReactTransitionGroup>
//                 <JQuerySlide component={yourComponentOrAReactDomComponentClass} otherProp={a} otherProp={B} />
//             </ReactTransitionGroup>
//         </div>);
// Note: You need to transfer the style onto whatever is underlying, either 
// with transferPropsTo or with a style= prop on your returned element. 
// If you set a key, anything with a different key will be a new element, and 
// the new one will be appearing simultaneous with the old one disappearing.